Skip to content
Tippy Logo

Tippy.js

v5.0.3

All Props

PropDefaultDescription
allowHTMLtrueDetermines if the tippy can have HTML content rendered inside of it.

Make sure you are sanitizing any user data if rendering HTML to prevent XSS attacks.
animateFill (available as a plugin)falseDetermines if the background fill color of the tippy should be animated.

You must import the dist/backdrop.css & animations/shift-away.css stylesheets for styling to work.
animation"fade"The type of transition animation.

Possible values: "shift-away", "shift-toward", "fade", "scale", "perspective" (each require importing styleseheets), or your own custom animation.

See Animations for more information.
appendTodocument.bodyThe element to append the tippy to.

Possible values: "parent" (the reference's parentNode), Element, (reference) => Element.

If interactive: true, the default behavior is appendTo: "parent" instead of document.body.

See Accessibility for more information.
aria"describedby"The aria-* attribute applied to the reference element.

Possible values: "describedby", "labelledby". Use null to prevent the attribute from being added.
arrowtrueDetermines if the tippy has an arrow.

Possible values: boolean, string (HTML), or SVGElement (your own shape).

To use the default round arrow, import roundArrow from the package (tippy.roundArrow in IIFE version) and pass it as the value.

You must also import dist/svg-arrow.css when using SVG arrows for styling to work.
boundary"scrollParent"The boundary that Popper.js' preventOverflow modifier adheres to.

Possible values: "scrollParent", "window", "viewport", or an HTMLElement.
content""The content of the tippy.

Possible values: string, Element, or (reference) => Element.
delay0Delay in ms once a trigger event is fired before a tippy shows or hides.

Possibles values: number, [number, number] = [show, hide].

Specifying a number means both the show and hide delays are the same. Use null in the array to use the default value.
distance10How far in pixels the tippy element is from the reference element.

Possible values: number (px), string (with units).

Only applies to a single axis and not to the parent popper element, see the offset prop.
duration[275, 250]Duration of the CSS transition animation in ms.

Possibles values: number, [number, number] = [show, hide].

Specifying a number means both the show and hide delays are the same. Use null in the array to use the default value.
fliptrueDetermines if the tippy flips so that it is placed within the viewport as best it can be if there is not enough space.
flipBehavior"flip"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, instead of "top".
flipOnUpdatefalseDetermines if the tippy should flip when necessary if its position updates while showing (for example, while scrolling, resize, or if the size of the tooltip changed).
followCursor (available as a plugin)falseDetermines if the tippy follows the user's mouse cursor.

Use the strings "vertical" or "horizontal" to only follow the cursor on a single axis.

Use "initial" to place the tippy at the initial cursor position upon show, but prevent following it.

On touch devices, "initial" is the behavior for all truthy values.
hideOnClicktrueDetermines if the tippy should hide if a mousedown event was fired outside of it (i.e. clicking on the reference element or the body of the page).

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".
ignoreAttributesfalseDetermines if data-tippy-* attributes on the reference element should be ignored.

Increases performance if you enable it.
inertiafalseDetermines if an inertial slingshot effect is applied to the CSS animation.
inlinePositioning (available as a plugin)falseAdds enhanced support for inline element positioning (display: inline).

Automatically detects inline elements and positions the tippy correctly.
interactivefalseDetermines if the tippy is interactive, i.e. it can be hovered over or clicked without hiding.

If your tippy appears cut off or invisible, see the FAQ for solutions.
interactiveBorder2Determines the size in pixels of the invisible border around a tippy which will prevent it from hiding if the cursor left it.
interactiveDebounce0Number in ms to debounces the internal onMouseMove handler which determines when an interactive tippy should hide.
lazytrueDetermines if the positioning engine (powered by Popper.js) is created lazily. That is, it's only created when necessary upon showing the tippy for the first time.

If you need to access the popperInstance synchronously after creation, set this to false. Note that disabling this decreases performance considerably.
maxWidth350Determines the maximum width of the tippy.

Use a number for pixels, or a string to add units such as rem, or "none".
multiplefalseDetermines if the reference element can have multiple tippys applied to it.
offset0Determines the offset of the tippy element.

Unlike distance, it can work on both axes by using a string in the form "x, y", such as "50, 20".

Avoid using an offset along the same axis as the placement prop if using interactive: true. If using a number, there won't be any problems.
onAfterUpdatenoopLifecycle hook invoked after the tippy's props have been updated.
onBeforeUpdatenoopLifecycle hook invoked before the tippy's props have been updated.
onCreatenoopLifecycle hook invoked when the tippy has has been created.
onDestroynoopLifecycle hook invoked when the tippy has has been destroyed.
onHiddennoopLifecycle hook invoked when the tippy has fully transitioned out and is unmounted from the DOM.
onHidenoopLifecycle hook invoked when the tippy begins to transition out.

You can cancel hiding by returning false from this lifecycle.
onMountnoopLifecycle hook invoked when the tippy has been mounted to the DOM (called after onShow).
onShownoopLifecycle hook invoked when the tippy begins to transition in.

You can cancel showing by returning false from this lifecycle.
onShownnoopLifecycle hook invoked when the tippy has fully transitioned in.
onTriggernoopLifecycle hook invoked when the tippy was triggered by a real DOM event (called before onShow) to show the tippy.
onUntriggernoopLifecycle hook invoked when the tippy was triggered by a real DOM event (called before onHide) to hide the tippy.
placement"top"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.
role"tooltip"Specifies the role attribute on the tippy element.
showOnCreatefalseDetermines if the tippy will be shown immediately once the instance is created.
sticky (available as a plugin)falseEnsures the tippy stays stuck to its reference element if it moves around or changes size while showing.

Use true to check both reference and popper DOM rects, or use the strings "reference" or "popper" to check only one rect for improved performance (both are checked by default).

See the updateDuration prop to change the transition duration between position updates.
theme""Themes added as classes (each separated by a space) to the tippy element's classList.

See Themes for more information.
touchtrueDetermines if the tippy displays if the user is currently using touch input.

Possible values: boolean, "hold", ["hold", number].

Use "hold" to use touch listeners instead, and e.g. ["hold", 500] to simulate "long press" behavior.
trigger"mouseenter focus"The events (each separated by a space) which cause a tippy to show.

Possible values: "mouseenter", "focus", "click", "manual".

Use "manual" to only trigger the tippy programmatically.
triggerTargetnullWhich element(s) the trigger event listeners are applied to instead of the reference element.

Possible values: null, Element, or Element[].
updateDuration0The transition duration between position updates of the popper element.

Useful for the sticky and flipOnUpdate props.
zIndex9999Determines the z-index of the tippy.