v3.1.0

Features

• Introduce types file for TypeScript module support (#329)
• New themes: light-border and google (#339)
• Add state.isMounted, state.isShown, and props.onMount()

Fixes

• Ignore parsing content option; resolve #337
• Allow empty content for event delegation; resolve #321

v3.0.0

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! 🎉

v2.6.0

• #289: Add tippy.useCapture() method to change the global click listener to use capture before bubbling. Call it before any calls to tippy()
• Fixes rare issue where onTransitionEnd does not fire with onHidden by removing an internal hack, and using delay: [0, 20] as the default instead of delay: 0

v3.0.0-beta.1

• "module" field points to the dist/esm/tippy.standalone.js file for latest 1.x Popper.js dependency
• Fixes issue with focusable element requiring two show calls after being focused
• Adds shouldPopperHideOnBlur option, closes #285
• Adds missing role attribute from popper element

v3.0.0-beta.0

• 📦 ⚛️ React wrapper published with this beta: https://github.com/atomiks/tippy.js-react/releases/tag/v1.0.0-beta.1
• Prevent overwriting existing content DOM by set() if content was not changed.
• Use a default hide delay of 20ms and remove onHidden transitionend hack.

v3.0.0-alpha.3

• Add interactiveDebounce (number in ms) option (#274)
• Add sourcemaps
• tippy.hideAllPoppers static method exposed
• Fix #278, #279 regressions in alpha.2
• Remove unnecessary code in set() method which now integrates better with React, etc.
• Other misc edge cases resolved

v3.0.0-alpha.2

• Fixes #276 popperOptions not being used
• Fixes #193 finally (but need to attend to #274)
• Fixes #275 tippy.defaults not updating when using tippy.setDefaults()
• Fixes potential errors being thrown on window resize
• Adds .setContent() method as a shortcut to .set({ content })
• autoInit() function is deferred with setTimeout() to allow the defaults to be changed before auto-initialization

v3.0.0-alpha.1

• Include IE11 transitionend fix
• Subtler animations for scale and perspective
• Popper.js 1.14.4
• Include esm directory and module field in package.json

v3.0.0-alpha.0

Tippy.js 3: alpha 0

The first alpha release of Tippy.js v3.

npm i tippy.js@next

What's changed?

You no longer use a title attribute on elements, and the html option has been removed. Both functionalities have been streamlined into a single prop: content.

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 <0.5ms to do this check on a page if there are no tooltips).

Method 2: content

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.

tippy() call

The object that is returned:

• selector is now named targets
• tooltips is now named instances

Instances

• New popperChildren property: 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. Instead, it's now props, inspired by React.
• state object properties are all prefixed with is because they are boolean values.
• listeners made private

Methods

The most useful new method is set(). It allows you to update the props of a tooltip after it has been created.

const tip = tippy.one('.btn', { 
  content: 'Hello!', 
  arrow: true,
  delay: 500
})

// Later on...
tip.set({ 
  content: 'Bye!', 
  arrow: false,
  delay: 0
})

Static

• tippy.setDefaults(props) - pass an object in to change the default configuration
• tippy.browser removed

Options/Props

• a11y: true - (accessibility shorthand): ensure the reference element can receive focus
• allowTitleHTML: true is now allowHTML
• 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". Not 100% sure on this, however.
• touch: true- display the tooltip on touch devices?
• createPopperInstanceOnInit: false is now lazy: true. More concise name.
• showOnInit: false - show the tooltip immediately?
• maxWidth removed. Should be handled by a theme in CSS because of narrow mobile devices.
• multiple: false - can the reference have multiple tippys? Currently each new instance overrides the previous _tippy property. It most likely needs to be turned into an array on the second init, but I fear this causes unpredictable behavior. (The previous option which allowed multiple click triggered tooltips to be open is now gone. I don't see much demand for it, but it might return as a different name).
• duration/delay: you can now leave a value undefined in the array and the default value is used. e.g. duration: [, 100] (use default for show) or duration: [100] (use default for hide). It's more concise than an object: duration: { hide: 100 } but the syntax is kind of messy. Might change this.

Accessibility/focus handling

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

Handling fallback for unsupported browsers

I believe this should be handled by the user, not the library.

The best way is to inline the tooltip content next to the reference element on old mobile & desktop browsers for interactive HTML popovers. For simple tooltips on desktop, manually set the title property on the element.

Unsupported = <0.5% worldwide usage or nonstandard browsers.

TODO before final release

• Fix #193
• More configurable animations. Currently can be handled with theme but requires lots of boilerplate selectors. Would be nice to make it declarative as an option.
• #174: Cooler animations someday?
• Finish writing tests. There's over 200, but I probably need to move back to a browser from Jest because there are too many things that need to be tested in a real browser using a layout engine.
• Package: sourcemaps, ES module (maybe, since there's not much to treeshake)

v2.5.3

• fix: #249
• fix: remove problematic iOS code that autoclicks which sometimes causes doubles clicks