Tippy.js – A highly customizable Tooltip & Popover library


The most-configurable Tooltip library you’ve ever seen: Tippy.js. This library uses the Popper.js positioning engine, but isn’t from the same author as by the Tooltip.js script. It works in all modern browsers that supports the MutationObserver and the requestAnimationFrame, which includes 11+.

The simplest way to create a Tippy.js Tooltip is by just using the attribute data-tippy="Tooltip Text". But you don’t should stick to this, because this library offers far more. Such as Animations, configurable Show/Hide transition durations, delays, custom HTML, different designs and many many more!

Download the latest version of Tippy.js as .ZIP or as .TAR package!

npm i tippy.js --save

yarn add tippy.js --save

bower install tippy.js --save


The package contains, like every library which uses popper.js, many JavaScript files. All of them are available also as minified version and with an respective Source Map. There are 4 different editions of this script: The tippy.js file contains Tippy and Poppy.js, tippy.standalone.js contains ONLY tippy itself and tippy.all.js contains Tippy, Poppy.JS as well as the main Stylesheet (tippy.css).

Last but not least: The ECMAScript Module-Written file is available separately in the respective subfolder esm. 4 different themes are also included in the themes subdirectory.


Load Tippy.js

Link the main Stylesheet as well as the optional theme, if desired, directly in the header of your HTML Document. We recommend to embed the respective JavaScript immediately after the opened <body> tag. And don’t forget: If you’re using the tippy.all.js, then you don’t need the main Stylesheet at all!

<!DOCTYPE html>
        <meta charset="utf-8" />
        <!-- Required Stylesheet -->
        <link type="text/css" rel="stylesheet" href="/css/tippy.css" />
        <!-- Optional Theme Stylesheet -->
        <link type="text/css" rel="stylesheet" href="/css/themes/theme.css" />
        <!-- Required JavaScript -->
        <script type="text/javascript" src="/js/tippy.min.js"></script>


Configure Tippy.js

The Script itself has MANY configurations and options to control the behavior and the design of your Tippy Tooltips and Popovers. It’s really recommended to check out the official documentation to learn more about Tippy.js and the methods behind.

document.addEventListener("DOMContentLoaded", {
        a11y:                   true,
        allowHTML:              true,
        animateFill:            true,
        animation:              "shift-away",
        appendTo:               document.body,
        arrow:                  false,
        arrowType:              "sharp",
        arrowTransform:         "",
        content:                "",
        delay:                  [0, 20], 
        duration:               [275, 250], 
        distance:               10,
        flip:                   true,
        flipBehavior:           "flip",
        followCursor:           false,
        hideOnClick:            true,
        inertia:                false,
        interactive:            false
        interactiveBorder:      2,
        interactiveDebounce:    0,
        lazy:                   true,
        livePlacement:          true,
        multiple:               false,
        offset:                 0,
        onHidden:               function(){ },
        onHide:                 function(){ },
        onMount:                function(){ },
        onShow:                 function(){ },
        onShown:                function(){ },
        performance:            false,
        placement:              "top",
        popperOptions:          {},
        shouldPopperHideBlur:   true,
        showOnInit:             false,
        size:                   "regular",
        sticky:                 false,
        target:                 "",
        theme:                  "dark",
        touch:                  true,
        touchHold:              false,
        trigger:                "mouseenter focus",
        updateDuration:         200,
        wait:                   null,
        zIndex:                 9999


Configure: Options

If true, ensures the reference element can receive focus by adding tabindex="0" if the element is not natively focusable like a button.
Determines if HTML can be rendered in the tippy.
Determines if the tippy’s background fill should be animated. Disabled if arrow: true.
The type of transition animation.
The element to append the tippy to. Use a function that returns an element to dynamically append the tippy relative to the reference element.
Determines if an arrow should be added to the tippy pointing toward the reference element.
The type of arrow. "sharp" is a CSS triangle using the border method, while "round" is a custom SVG shape.
CSS transform to apply to the arrow. Only scale and translate are supported. It is dynamic. Apply the transform that you would normally give to a "top" placement, even if the placement is different.
The content of the tippy.
Delay in ms once a trigger event is fired before a tippy shows or hides. Use an array of numbers such as [100, 500] to specify a different value for show and hide. Use null in the array to use the default value, e.g. [null, 50].
Duration of the CSS transition animation in ms. Use an array of numbers such as [100, 500] to specify a different value for show and hide. Add null in the array to use the default value, e.g. [null, 50].
How far in pixels the tippy element is from the reference element. Only applies to a single axis and not to the parent popper element, see offset.
Determines if the tippy flips so that it is placed within the viewport as best it can be if there is not enough room.
Determines the order of flipping, i.e. which placements to prefer if a certain placement cannot be used. Use an array such as ["bottom", "left"] to prefer the “left” placement if “bottom” is unavailable. By default, it chooses the opposite axis, i.e. “top”.
Determines if the tippy follows the user’s mouse cursor while showing. Use the strings "vertical" or "horizontal"to only follow the cursor on a single axis.
Determines if the tippy should hide if its reference element was clicked. For click-triggered tippys, using false will prevent the tippy from ever hiding once it is showing. To prevent clicks outside of the tippy from hiding it but still allow it to be toggled, use the string "toggle".
Adds an attribute to the tippy element that changes the CSS transition timing function to add an inertial “slingshot” effect to the animation.
Determines if a tippy should be interactive, i.e. able to be hovered over or clicked without hiding.
Determines the size of the invisible border around a tippy that will prevent it from hiding (only relevant for the hover trigger). Useful to prevent the tippy from accidentally hiding from clumsy cursor movements.
A number in ms that debounces the onMouseMove handler which determines when the tippy should hide.
By default, the popperInstance (the positioning engine for the tippy) is lazily created. That is, it’s only created when necessary (i.e. triggering the tippy for the first time). Setting this prop to false allows you to access the instance synchronously without needing to show the tippy first.
Determines if the popper instance should listen to scroll events. This means it will update the position on scroll. If you don’t want the tippy to flip around when scrolling, and the tippy’s reference is not in a scrollable container, you can set this to false.
Determines if the reference can have multiple tippy instances.
An offset that Popper.js uses to offset the popper element. Can work with both the x and y axis, distinct from distance.
Lifecycle function invoked when the tippy has fully transitioned out.
Lifecycle function invoked when the tippy begins to transition out.
Lifecycle function invoked when the tippy has been mounted to the DOM.
Lifecycle function invoked when the tippy begins to transition in.
Lifecycle function invoked when the tippy has fully transitioned in.
If true, disables data-tippy-* attributes which reduces init execution by half.
Positions the tippy relative to its reference element. Use the suffix -start or -end to shift the tippy to the start or end of the reference element, instead of centering it. For example, top-start or left-end.
Specify custom Popper.js options. See the Popper.js documentation for more.
A function that returns a boolean to determine if the popper element should hide if it’s blurred (applies only if interactive). If the popper element is blurred (i.e. no elements within it are in focus), the popper is hidden. However, there are cases in which you may need to keep it visible even when not in focus.
If true, the tooltip will be shown immediately once the instance is created. If using on page load, use sticky: true because the reference element can move around while the layout gets built by the browser after initialization (unless the layout is guaranteed to be static).
The size of the tippy.
Ensures the tippy stays stuck to its reference element if it moves around while showing.
CSS selector used for event delegation.
Themes added as classes (each separated by a space) to the tippy’s class list, which adds a -theme suffix, i.e. "dark-theme".
Determines if the tippy displays on touch devices.
Determines trigger behavior on touch devices. Instead of a tap on the reference to show and a tap elsewhere to hide the tippy, the reference must be pressed and held for the tippy to show. Letting go from the screen will hide it. To prevent the mobile context menu from appearing, ensure the element cannot be selected using user-select: none; and/or prevent the default behavior for the contextmenu event.
The events (each separated by a space) which cause a tippy to show. Use manual to only trigger the tippy programmatically.
The transition duration between position updates for the sticky option. Set to 0 to prevent flips from transitioning.
A function that, when defined, will wait until you manually invoke show() when a tippy is triggered. It takes the tippy instance and the trigger event as arguments.
The z-index of the popper element.

Leave a Reply