Skip to content

Releases: atomiks/tippyjs

v2.0.9

11 Jan 21:12
Compare
Choose a tag to compare
refresh deps

v2.0.8

17 Dec 00:39
Compare
Choose a tag to compare
v2.0.8

v2.0.5

13 Dec 14:33
Compare
Choose a tag to compare
  • #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

v2.0.4

10 Dec 08:52
Compare
Choose a tag to compare
  • Fixes #136
  • Fixes error thrown by followCursor option if the tooltip is manually shown
  • Prevent CSS from being injected for unsupported browsers

v2.0.3

09 Dec 16:52
Compare
Choose a tag to compare

[internal]: private members cleaned up

v2.0.1

03 Dec 10:23
Compare
Choose a tag to compare

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

v2.0.0-beta.2

29 Nov 09:47
Compare
Choose a tag to compare
v2.0.0-beta.2 Pre-release
Pre-release

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]

v2.0.0-beta

21 Nov 15:25
Compare
Choose a tag to compare
v2.0.0-beta Pre-release
Pre-release

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.

1.4.2

17 Nov 12:50
Compare
Choose a tag to compare
  • Upgrade Popper.js to 1.12.9
  • Fix duplicate transitionend listeners added to tooltip

1.4.1

23 Oct 07:58
Compare
Choose a tag to compare
  • Fix #118 followCursor - where tooltip would be positioned too far away from cursor/reference if the tooltip was large