Inspired by the excellent Tipsy jQuery plugin written by Jason Frame. Tooltips are an updated version, which don’t rely on images, use CSS3 for animations, and much more.

Contents

Usage

Examples

Four directions

Four positioning options are available: top, right, bottom, and left aligned. Besides that, auto option may be used to detect a position that fits the component on screen.

Dismiss on next click

Use the focus trigger to dismiss tooltips on the next click that the user makes.

Dynamic Content

tooltip content can contain any html template. Just create <template #myId> with any html allowed by Angular, and provide template ref (#myId) as tooltip content.

Dynamic Html

By using small trick you can display any dynamic html, which you got from ajax request for example.

Append to body

When you have some styles on a parent element that interfere with a tooltip, you’ll want to specify a container="body" so that the tooltip’s HTML will be appended to body. This will help to avoid rendering problems in more complex components (like our input groups, button groups, etc) or inside elements with overflow: hidden

Configuring defaults

Custom triggers

Manual triggering

Component level styling

Custom class

API Reference