Quick and easy popovers

This is basic popovers

HTML and bindings in popovers

Popovers can contain any arbitrary HTML, Angular bindings and even directives! Simply enclose desired content in a <ng-template> element.
Hello, {{ name }}!

Custom triggers

You can easily override open and close triggers by specifying event names (separated by :) in the triggers property.

Manual triggers

Alternatively you can take full manual control over popover opening / closing events.

Automatic closing with keyboard and mouse

As for some other popup-based widgets, you can set the popover to close automatically upon some events.
  • click inside:
  • click outside:
  • all clicks:  

Context and manual triggers

You can optionally pass in a context when manually triggering a popover.
{{ greeting }}, {{ name }}!

How would you like to greet me?

Popover Visibility Events

You can optionally pass in a context when manually triggering a popover.
  • Popover is currently: {{ popover.isOpen() ? 'open' : 'closed' }}
  • Last shown at: {{ lastShown | date: 'h:mm:ss' }}
  • Last hidden at: {{ lastHidden | date: 'h:mm:ss' }}

Append popover in the body

Set the container property to "body" to have the popover be appended to the body instead of the triggering element's parent. This option is useful if the element triggering the popover is inside an element that clips its contents (i.e. overflow: hidden).

Custom and manual triggers

You can easily override open and close triggers by specifying event names (separated by :) in the triggers property.

Quick and easy tooltips

This is Quick and easy tooltips

HTML and bindings in tooltips

Tooltips can contain any arbitrary HTML, Angular bindings and even directives! Simply enclose desired content in a ng-template element.
Hello, {{ name }}!

Custom and manual triggers

You can easily override open and close triggers by specifying event names (separated by :) in the triggers property.

Automatic closing with keyboard and mouse

As for some other popup-based widgets, you can set the tooltip to close automatically upon some events.
  • click inside:
  • click outside:
  • all clicks:  

Context and manual triggers

You can optionally pass in a context when manually triggering a tooltip.
{{ greeting }}, {{ name }}!

Append tooltip in the body

Set the container property to "body" to have the tooltip be appended to the body instead of the triggering element's parent. This option is useful if the element triggering the tooltip is inside an element that clips its contents (i.e. overflow: hidden).

Tooltip with custom class

You can optionally pass in a custom class via tooltipClass