• fix #224: hotfix for regression due to #221
• fix #221: disabled elements should not show tooltip in FF to align with other browsers
• fix #218: destroying tooltip on click should not throw errors
• fix #216: sticky option positioning issue on FF due to new Popper.js positioning fix

• Upgrade Popper.js dependency: 1.14.1 => 1.14.2which has some nice fixes for positioning and bundle size 😄
• Add new static method: tippy.one() for creating one single tooltip, it will return the tooltip instance directly
• css: remove pointer-events on round arrow SVG if not interactive

fix: remove unnecessary files from npm package (#210)

• Add allowTitleHTML option (#197)
• Add tippy.disableAnimations() to modify defaults to apply no animations to tooltips (mainly for automated testing)
• Tooltip arrow now follows the cursor when it hits the boundaries (#188)
• Improved round arrow SVG shape
• Slightly improved backdrop fill animation

• fix #185: set .tippy-popper line-height to 1.4 to prevent descender letters like "g" and "y" from being cut off depending on the font/browser/OS. Will not affect themes with custom line-heights because of lower specificity.

• fix #181

• Add livePlacement option to prevent flipping on scroll.
• Fix #177, #179

• fix #170 - prevent scroll jumps when focusing interactive tooltips

Features

• Added ability to use event delegation (see docs)
• Callbacks now have the Tippy instance passed as an argument to them
• The popper element has the Tippy instance attached to it directly via _tippy
• Added compiled themes to dist/
• ⚠️Potential CSS break: arrowTransform now doesn't require translate when using scale to be positioned accurately due to modified transform-origin

Fixes

• Fix strange issue: #168

• #140 - Fix where tooltip with followCursor + delay would not be shown at the correct initial position
• #142 - Add repository field to package.json
• Slightly reduce margins on arrows
• Set tooltips to an empty array upon destroyAll() to free up memory

• Fixes #136
• Fixes error thrown by followCursor option if the tooltip is manually shown
• Prevent CSS from being injected for unsupported browsers

• Fixes #135

[internal]: private members cleaned up

Tippy out of beta!

The full list of changes are described in the first beta notes.

This full release is the same as beta-2 API-wise with a single change to browser.eventsBound as that is intended to be private, it's now browser._eventListenersBound

Bug fixes

• Popper will not overflow the document boundaries on update anymore if the window was resized in a certain way (Popper.js issue since 1.12.5)
• Use clip-path to prevent text from overflowing the backdrop when animating fill if the background is sufficiently different from the text color (no IE/Edge support unfortunately)
• Rare onTransitionEnd() issue with onHidden fixed
• Backdrop transition stutter on Safari fixed finally

Second beta release.

JavaScript

• Added disable() and enable() methods for when you want to temporarily disable a tooltip but not destroy it
• Added a callback hook tippy.browser.onUserInputChange() so you can react to a user's input method change (either mouse or touch). This means you can reliably disable tooltips for touch devices but keep them enabled for mouse if need be.
• Added enabled and visible properties to the Tippy.state object
• Fixed potential issue where the tooltip would remain stuck on the DOM by hiding it instantly on next popper update (i.e. scroll)
• Prevent any tooltip transition when updateDuration: 0 is specified

CSS

• Improved the backdrop fill animation on Safari (but still seems to have issues, just less often..)
• The inertia transition-timing-function has changed to "ease" when it's hiding so it doesn't slingshot back in. To make it look good, use double the duration for show, such as duration: [600, 300]

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.

• Upgrade Popper.js to 1.12.9
• Fix duplicate transitionend listeners added to tooltip

• Fix #118 followCursor - where tooltip would be positioned too far away from cursor/reference if the tooltip was large