Tippy 2 Beta 🎉

Tippy just got a whole lot better.

Docs

The docs have been overhauled to display Tippy's features in a more organized fashion.

Package

• src and tests removed from /dist/
• tippy.all.js and tippy.all.min.js are bundled versions of the JS and CSS. The CSS is automatically injected into the document's head, so all that's needed is the script file.

JavaScript

Tippy instances are now single tooltip instances.

New workflow for manual control

const btn = document.querySelector('.btn')
tippy(btn)

// The Tippy instance is now stored on the reference element via `_tippy`. 
// No need to pass any arguments in.
btn._tippy.show()
btn._tippy.hide()

The object returned from tippy() is now different

const tip = tippy('.btn')

tip = {
  selector: '.btn',
  options: { ... },
  tooltips: [Tippy, Tippy, Tippy, ...],
  destroyAll() { ... }
}

Static tippy props/methods

camelCase has been applied to the naming of everything to simplify it.

tippy.Browser is now tippy.browser
tippy.Defaults is now tippy.defaults

tippy.enableDynamicInputDetection (and disable) have been removed. Simply set the property to true or false inside the browser settings.

Identifying Tippy-tooltipped elements

Reference elements now have a data-tippy attribute applied instead of data-tooltipped.

<button title="tooltip" data-tippy>text</button>

Tippy instances

Tippy instances have been simplified.

Properties

• el is now reference

Methods

• show(duration)
• hide(duration)
• destroy()

Removed methods

• update() removed
• getPopperElement() removed
• getReferenceElement() removed
• getReferenceData() removed
• destroyAll() removed

Tippy instances now only need 3 methods: show(), hide(), destroy(), as it only refers to a single tooltip.

show() and hide() only take 1 argument: a custom transition duration, and destroy() needs no arguments.

Data attributes

• data-tippy-* has replaced data-* to prevent conflicts.

Option changes

• position is now placement
• animation has an extra choice: shift-toward. Additionally, shift is now shift-away to better reflect the difference between the two.
• followCursor changed the behavior so that the document is the delegate for mousemove event instead of the reference element itself. This results in smoother behavior.

Removed options

• arrowSize has been replaced by arrowTransform for far greater control over the arrow.
• stickyDuration and flipDuration are now 1 option: updateDuration.

Added options

• createPopperInstanceOnInit - specify whether to create popper instance on init rather than the first show (has a performance impact)
• arrowType - Tippy has a new arrow type – 'Round'. It's a custom SVG shape.
• flip - brings a popperOption to the base-level options
• flipBehavior - brings a popperOption to the base-level options
• maxWidth - specify the max width of the tooltip

CSS

The CSS has been simplified.

Tooltips

Tooltips are smaller by default, including the small and large sizes.

.enter and .leave "global" classes which can cause conflicts have been replaced by [data-state="visible" and [data-state="hidden"].

IDs are now tippy-{id} rather than tippy-tooltip-{id}

Themes

• The light and translucent themes have been removed to simplify the CSS and reduce bundle size. There is now better documentation on creating a theme (mainly for the arrow which is tricky).

Selectors

• [x-arrow] is now .tippy-arrow (triangle) or .tippy-roundarrow (SVG)
• [x-circle] is now .tippy-backdrop
• .html-template is now [data-html]

Misc

• Interactive reference elements now receive .tippy-active instead of just .active to prevent conflicts
• Referect objects are now modified and used as the selector rather than a new object reference

Bug fixes

• Fixed a reflow animation bug on Safari with the backdrop animation.
• Fixed two hide() calls when clicking / touch devices.
• Removed the need for a transitionend timeout.