Tippy.js – A highly customizable Tooltip & Popover library

Tippy.js

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

Instructions

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>
<html>
    <head>
        <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" />
    </head>
    <body>
        <!-- Required JavaScript -->
        <script type="text/javascript" src="/js/tippy.min.js"></script>
    </body>
</html>

 

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", {
    tippy.setDefaults({
        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

a11y
If true, ensures the reference element can receive focus by adding tabindex="0" if the element is not natively focusable like a button.
allowHTML
Determines if HTML can be rendered in the tippy.
animateFill
Determines if the tippy’s background fill should be animated. Disabled if arrow: true.
animation
The type of transition animation.
appendTo
The element to append the tippy to. Use a function that returns an element to dynamically append the tippy relative to the reference element.
arrow
Determines if an arrow should be added to the tippy pointing toward the reference element.
arrowType
The type of arrow. "sharp" is a CSS triangle using the border method, while "round" is a custom SVG shape.
arrowTransform
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.
content
The content of the tippy.
delay
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
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].
distance
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.
flip
Determines if the tippy flips so that it is placed within the viewport as best it can be if there is not enough room.
flipBehavior
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”.
followCursor
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.
hideOnClick
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".
inertia
Adds an attribute to the tippy element that changes the CSS transition timing function to add an inertial “slingshot” effect to the animation.
interactive
Determines if a tippy should be interactive, i.e. able to be hovered over or clicked without hiding.
interactiveBorder
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.
interactiveDebounce
A number in ms that debounces the onMouseMove handler which determines when the tippy should hide.
lazy
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.
livePlacement
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.
multiple
Determines if the reference can have multiple tippy instances.
offset
An offset that Popper.js uses to offset the popper element. Can work with both the x and y axis, distinct from distance.
onHidden
Lifecycle function invoked when the tippy has fully transitioned out.
onHide
Lifecycle function invoked when the tippy begins to transition out.
onMount
Lifecycle function invoked when the tippy has been mounted to the DOM.
onShow
Lifecycle function invoked when the tippy begins to transition in.
onShown
Lifecycle function invoked when the tippy has fully transitioned in.
performance
If true, disables data-tippy-* attributes which reduces init execution by half.
placement
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.
popperOptions
Specify custom Popper.js options. See the Popper.js documentation for more.
shouldPopperHideOnBlur
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.
showOnInit
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).
size
The size of the tippy.
sticky
Ensures the tippy stays stuck to its reference element if it moves around while showing.
target
CSS selector used for event delegation.
theme
Themes added as classes (each separated by a space) to the tippy’s class list, which adds a -theme suffix, i.e. "dark-theme".
touch
Determines if the tippy displays on touch devices.
touchHold
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.
trigger
The events (each separated by a space) which cause a tippy to show. Use manual to only trigger the tippy programmatically.
updateDuration
The transition duration between position updates for the sticky option. Set to 0 to prevent flips from transitioning.
wait
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.
zIndex
The z-index of the popper element.

Leave a Reply

Top