tippyjs

Features

• Add support for 'focusin' trigger (#689)

Fixes

• Prevent removing aria-expanded attribute if already present on the reference (#690)

Fixes

• Make mouseenter click behaviour consistent for interactive/non-interactive tippies (#669)
• Fix onShown hook

Fixes

• modify trigger: 'mouseenter click' behavior (#659)
• createSingleton: add bail-out check
• followCursor: preserve original popperInstance.reference
• sticky: popperInstance reference should be checked
• errors/warnings: fix dev/prod divergence and change formatting to prevent odd text wrapping

Fixes

• core: preserve previous popperInstance.reference on setProps
• core: showOnCreate prop should respect delay
• types: export Boundary as a type (#637)

Fixes

• core: filter out duplicate plugins (#626)
• core: revert distance technique to use top/left properties (#628)
• inlinePositioning: works with .show() method (#630)
• types: refactor interfaces to generics, strict types for custom plugins, function overloading types for tippy and delegate

Features

• Allow plugins passed as Props.plugins

Deprecations

• Deprecate createTippyWithPlugins() - use tippy.setDefaultProps({plugins: [...]});

Fixes

• core: Fix onWindowBlur condition
• core: Fix iife versions' addons not having plugins passed by default
• followCursor: Allow .show() / .hide() to work
• types: Handle null in delay/duration arrays

Fixes

• core: Reduce impact of .tippy-iOS class side effects
• core: Improve support for nested tippies (CSS fixes + account for nested interactiveBorders)
• core: hideAll() works on <iframe>s
• props: distance should accept strings
• css: Switch to consistent px units
• warnings: Tweak invalid prop warning
• warnings: Tweak arrowType warning
• warnings: Fix target warning link

Fixes

• core: Only set transition duration to 0 upon show if not currently mounted (for createSingleton early cancelation)
• core: Plugin hooks for onShow and onHide invoked before props'
• core: Change distance technique to use padding on popper instead of top/left on tooltip
• css: Improve consistency of vars and units
• addons: Add support for plugins
• delegate: Account for data-tippy-trigger attribute
• createSingleton: Fix missing argument in onAfterUpdate to preserveInvocation()
• perf: Optimize data-tippy-* attribute reducer
• warnings: Add link to accessibility docs for interactive warning and improve clarity

Fixes

• core: Add support for iframes: https://github.com/atomiks/tippy.js-react/issues/121
• core: Use .currentTarget over .target
• core: Clear pending timeouts on destroy
• followCursor: Use rAF instead of setTimeout to avoid rare jitter on content update
• followCursor: reset popperInstance reference onHidden
• warnings: Ensure links end with trailing slash
• types: Add missing type for createTippyWithPlugins

View migration guide from v4 to v5

Goals

1. Improve developer experience with warnings without bloating production bundle size
2. Reduce core size and make the library more tree-shakable
3. Allow new feature additions to be added separately without increasing bundle size (addons & plugins system)
4. Improve naming consistency and usage

Highlights

🌳 Core size has decreased

The library is now tree-shakable, allowing you to import and use only the parts you need.

• ⬇️ 30%+ smaller download size
• ⬇️ 50%+ smaller parse size
• ⬇️ 60%+ smaller core CSS + smaller external animation files

👷 Better developer experience

There is now a DEV-only messaging system to help you when things go wrong.

🔥 Animation improvements

There is a new /animations folder (like /themes) and creating custom animations is a smoother experience. Additionally, there is new documentation about fully dynamic transitions of a tippy element's dimensions, and work is being done to create an official API for it.

🤩 Plenty of new features

• New touch: ["hold", delay] prop (for long press behavior)
• New arrow: string | SVGElement values to use your own shape
• New createSingleton addon, supersedes group() for smooth transitions
• New sticky behavior to check reference or popper rects (or both)
• New inlinePositioning prop supports better inline element positioning (further behavior options to come)

🔌 Plugins API

Allows you to extend functionality of tippy instances and create your own props.

♿ Improved accessibility out of the box

Interactive tippies are now accessible by default, and DEV warnings will let you know if there is an accessibility problem.

🐞 Subtle behavioral bugs fixed and improvements made

• animateFill: true is no longer default, so the shape cut off issue is not present with large content unless you intentionally use it
• hideOnClick uses mousedown instead of click
• Calling .disable() will hide an instance if it's currently visible
• Updating content while hovering over an interactive element will not break the mouseleave to hide it
• For instances with a delay, if the tippy began to transitioning out and the instance was triggered again before unmounting, it will ignore the delay
• Window blur listener will only blur references whose tippy is not visible upon blur
• If using multiple tippys on a single element, screenreaders will now announce all of them
• In touch and keyboard contexts, delay is always 0

Installation

Package Managers:

# npm
npm i tippy.js@5

# Yarn
yarn add tippy.js@5

CDN:

<script src="https://unpkg.com/popper.js@1"></script>
<script src="https://unpkg.com/tippy.js@5"></script>

Fixes

• Optimize sticky option by preventing repaints on every animation frame
• Place injected style node before the first style or link tag instead of first child
• Reduce CSS size slightly
• Fix leak with document click listener not being removed if tippy was hidden before it was shown when using delay
• Fix #532: Add referenceNode property for followCursor (NOTE: awaiting [email protected] release)

Fixes

• Fix followCursor having incorrect offset when using a variation placement (-start or -end) (#513)

Fixes

• Mounting behavior (IE11 scrollbar flicker) (#509)
• followCursor fixes (respects boundary & fix regression where initial was not placed correctly on touch devices on first show)
• Ensure destroy()'s unmounting of the tippy can never be impeded
• Fix the longstanding interactive scrolling issue
• Fix path selector having pointer-events: auto (#504)

Fixes

• Improve support for nested tippys by using per-instance hideOnClick handler (#485)
• Add data-tippy-stylesheet to style tag (#483)

Features

• Added triggerTarget option to apply the trigger listeners to a different node from the positioning reference
• Added onTrigger option to allow calls to .set() to change the reference position and instance props based on the event before the tooltip is shown without interrupting the lifecycle (unlike wait)
• Added ability to pass a ReferenceElement to HideAllOptions.exclude for references with multiple tippys

Fixes

• Make tippy.group() and updateDuration updateable
• Fix when popperOptions.onCreate and popperOptions.onUpdate are called so they match the actual invocations by Popper.js
• Fix followCursor not respecting popperOptions.modifiers.preventOverflow.padding
• Fix multiple tippys from only displaying one if using touch and hideOnClick: true
• Fix the tooltip moving with the cursor if over the popper element when using followCursor: '{horizontal, vertical}' and interactive: true
• [TypeScript] Fix instance.reference type to account for VirtualReference

Fixes

• Change show checks to fix Shadow DOM support (#453)
• Change notransition technique (#454)
• Add x-out-of-boundaries attribute to tooltip node (#455)
• Optimize set(): avoid recreating popperInstance by comparing props (#456)
• Remove tap highlight color by default on iOS

Features

• Add x-placement attribute to tooltip node, allowing you to style without needing to use the .tippy-popper selector

Example

Before:

.tippy-popper[x-placement^='top'] .tippy-tooltip.my-theme .tippy-arrow {
  border-top-color: pink;
}

After:

.tippy-tooltip.my-theme[x-placement^='top'] .tippy-arrow {
  border-top-color: pink;
}

Fixes

• Apply correct mutations when calling .set() with a popperInstance dependency update

Minor release was bumped due to large TypeScript refactor and a minor package fields change.

Fixes

• Improves types due to refactor (#441). Props interface was deprecated in favor of Options. Use Required<Options> to mimic the internal Props interface.
• Use unminified code in "main" and use the "unpkg" field (#445)
• Fix obscure Chrome setTimeout issue (#447)
• Remove will-change properties: seems to improve animation FPS
• Prevent overwriting user-defined preventOverflow padding
• Add safety early return to tippy.group()

This release mainly fixes some minor CSS issues

Fixes

• Make rem units align with whole pixels using 16px base default
• Size round arrow closer to default sharp arrow so it reaches the edges of the popper + reduce arrow margins overall
• Fix infinite loop when popperOptions is undefined instead of an object
• Fix small gaps when using the round arrow in Edge/IE11
• Fix longstanding issue (since v0) of Popper's preventOverflow not taking into account the distance prop