Tippy.js

Tippy.js is a highly customizable tooltip and popover library powered by Popper.js. It's compatible with IE11+, about 99% of desktop users and 97% of mobile users. It can be used to create simple static text tooltips, or complex HTML popovers that utilize AJAX.

Given an element on the page...

<button id="myButton">My Button</button>

We can give it many different types of tooltips. Let's explore some of the options below!

Default

The default tooltip looks like this. It has a nifty background fill animation!

tippy('#myButton', {
  content: "I'm a Tippy tooltip!",
})

Placement

Tooltips can be placed in four different ways in relation to the reference element. Additionally, the tooltip can be shifted along the axis using the suffix -start or -end.

tippy('#myButton', {
  placement: 'bottom', // or 'left', 'right', ...
})

Arrows

Tooltips can have an arrow that points toward the reference element. The size and proportion can also be modified with CSS.

tippy('#myButton', {
  arrow: true,
  arrowType: 'round', // or 'sharp' (default)
  animation: 'fade',
})

Animations

Tooltips can have different types of transition animations. Note, the filling effect has been disabled in these examples (animateFill: false).

tippy('#myButton', {
  animateFill: false,
  animation: 'scale', // or 'shift-toward', 'fade', ...
})

Themes

Tooltips can have custom styling. There are a few themes that come with the package available under themes/.

tippy('#myButton', {
  theme: 'light', // or 'light-border', 'google', ...
})

Triggers

Tooltips can also be triggered by click or focus events.

tippy('#myButton', {
  trigger: 'click', // or 'focus'
})

Interactivity

Tooltips can be interactive, allowing you to hover over and click inside them.

tippy('#myButton', {
  content: 'You can select the text inside here.',
  interactive: true,
})

HTML Content

Tooltips can contain HTML.

tippy('#myButton', {
  content: '<strong>Bolded <span style="color: aqua;">content</span></strong>',
})

Duration

Tooltips can have different animation durations.

tippy('#myButton', {
  duration: 0,
})

Delay

Tooltips can delay hiding or showing after a trigger.

tippy('#myButton', {
  delay: 500,
})

Follow Cursor

Tooltips can follow the mouse cursor and abide by a certain axis. Additionally, the tooltip can follow the cursor until it shows, at which point it will stop following (initial).

tippy('#myButton', {
  followCursor: true,
})

SVGs

Tooltips can be placed on SVG nodes, where followCursor: 'initial' becomes very useful, since it can be placed directly on the line.

tippy('line', {
  followCursor: 'initial',
  delay: 200,
  arrow: true,
})

Singleton

Use a single tooltip for many different reference elements.

Nesting

Tippys can be nested within other ones.

Multiple

Attach many tippys to a single element.

tippy('#myButton', {
  content: 'Left',
  placement: 'left',
  multiple: true,
})

tippy('#myButton', {
  content: 'Right',
  placement: 'right',
  multiple: true,
})

// ...

The above is not a complete list of features. There are plenty more!