It's here! 🎈

It's now on npm as the default @latest.

npm i tippy.js

View the docs: https://atomiks.github.io/tippyjs/

Breaking changes

This version changes the API on a fundamental level, so you will need to update all your call sites. You no longer use a title attribute, and there is no longer an html option. Instead, both of them have been streamlined into a single option called content.

In addition, tooltips can now be auto-initialized.

Method 1 (auto)

<button data-tippy="Tooltip">Text</button>
<button data-tippy="<strong>HTML</strong>">Text</button>

Elements with a data-tippy attribute are automatically given a tooltip. You no longer need to touch JavaScript. (Note on performance: It takes <1ms to do this check on a page if there are no tooltips).

Method 2 (function)

You can give elements a data-tippy-content attribute and use the function:

<button data-tippy-content="Tooltip">Text</button>
<script>tippy('button')</script>

Or specify the content as an option:

<button>Text</button>
<script>tippy('button', { content: 'Tooltip' })</script>

It can contain HTML, and you can use an HTMLElement as the value.

Collections

The object that is returned:

selector is now named targets
tooltips is now named instances

Instances

• popperChildren: access the children of the popper element easily without needing to do query selections or manual DOM walking.
• options has been renamed to props. Options are the props you supply optionally to tippy(), but it doesn't make sense for the tooltip configuration object to be called options.
• state object properties are all prefixed with is because they are boolean values.
• listeners made private

Option changes

• multiple: Boolean can the tooltip have multiple tippy instances?
• createPopperInstanceOnInit is now lazy: Boolean with the reverse behavior.
• maxWidth removed - should be handled via a theme
• hideOnClick changes "persistent" to "toggle" and it has the opposite behavior. This means that hideOnClick: false will prevent click-triggered tooltips from ever hiding unless you specify "toggle"

New features

• Sourcemaps + ES module are now in the package. Latest Popper.js@1 version is used when importing tippy.

Methods

• tippy.set(options)

This was previously impossible with v2: you can now change any option at runtime after the tippy instance was created.

• tippy.setContent(newContent)

Shortcut for .set({ content: newContent })

Options

• followCursor: Boolean|"horizontal"|"vertical"

You can now make the tooltip follow the cursor on a single axis instead of both by specifying a string.

• touch: Boolean

An option to effortlessly disable a tooltip from displaying on touch devices.

• a11y: Boolean

An option to ensure the reference element can receive focus.

• showOnInit: Boolean

Show the tooltip immediately?

• Cancel lifecycles for onShow / onHide

You can now cancel lifecycles by returning the boolean false.

• shouldPopperHideOnBlur: Function

Added due to improved focus handling

• interactiveDebounce: Number (ms)

Debounce on the internal onMouseMove handler for interactive inline text tooltips that span 2+ lines

Fixes

• #193

• #139

• Accessibility/focus handling

Focus handling and accessibility has been improved. Tabbing/keyboard nav around interactive tooltips now works better.

Official React Wrapper

A lightweight wrapper is now officially published under @tippy.js org.

npm i @tippy.js/react

View the docs for the React component here

I hope you like it! 🎉