All Props
| Prop | Default | Description |
|---|---|---|
allowHTML | true | Determines if content strings are parsed as HTML instead of text. Make sure you are sanitizing any user data if rendering HTML to prevent XSS attacks. |
animateFill (available as a plugin) | false | Determines 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. See Animations for details. |
appendTo | document.body | The 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. This allows screen reader software to announce the tippy content once the reference element is in focus. Possible values: "describedby", "labelledby". Use null to prevent the attribute from being added. |
arrow | true | Determines if the tippy has an arrow. Possible values: boolean, string (of SVG), or SVGElement. 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. Set allowHTML: false to render strings as text instead of HTML. |
delay | 0 | Delay 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. |
distance | 10 | How far in pixels the tippy element is from the reference element. Possible values: number (px), string (with units "rem" only). 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. |
flip | true | Determines 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. Possible values: "flip", Placement[]. Use an array such as ["bottom", "left"] to prefer the "left" placement if "bottom" is unavailable, instead of "top", if using the "bottom" placement. |
flipOnUpdate | false | Determines 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) | false | Determines 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. |
hideOnClick | true | Determines 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 tippies, 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". |
ignoreAttributes | false | Determines if data-tippy-* attributes on the reference element should be ignored. Increases performance if you enable it. |
inertia | false | Determines if an inertial slingshot effect is applied to the CSS animation. |
inlinePositioning (available as a plugin) | false | Adds enhanced support for inline element positioning (display: inline). Automatically detects inline elements and positions the tippy correctly. |
interactive | false | Determines 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. |
interactiveBorder | 2 | Determines the size in pixels of the invisible border around a tippy which will prevent it from hiding if the cursor left it. |
interactiveDebounce | 0 | Number in ms to debounce the internal onMouseMove handler which determines when an interactive tippy should hide. |
lazy | true | Determines 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. |
maxWidth | 350 | Determines the maximum width of the tippy. Use a number for pixels, or a string to add units such as rem, or "none". |
multiple | false | Determines if the reference element can have multiple tippies applied to it. |
offset | 0 | Determines 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. |
onAfterUpdate | noop | Lifecycle hook invoked after the tippy's props have been updated. |
onBeforeUpdate | noop | Lifecycle hook invoked before the tippy's props have been updated. |
onCreate | noop | Lifecycle hook invoked when the tippy has has been created. |
onDestroy | noop | Lifecycle hook invoked when the tippy has has been destroyed. |
onHidden | noop | Lifecycle hook invoked when the tippy has fully transitioned out and is unmounted from the DOM. |
onHide | noop | Lifecycle hook invoked when the tippy begins to transition out. You can cancel hiding by returning false from this lifecycle. |
onMount | noop | Lifecycle hook invoked when the tippy has been mounted to the DOM (called after onShow). |
onShow | noop | Lifecycle hook invoked when the tippy begins to transition in. You can cancel showing by returning false from this lifecycle. |
onShown | noop | Lifecycle hook invoked when the tippy has fully transitioned in. |
onTrigger | noop | Lifecycle hook invoked when the tippy was triggered by a real DOM event (called before onShow) to show the tippy. |
onUntrigger | noop | Lifecycle 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". |
plugins | [] | Specify plugins to use. See Plugins for details. |
popperOptions | {} | Specify custom Popper.js options. See the Popper.js documentation for more. |
role | "tooltip" | Specifies the role attribute on the tippy element. |
showOnCreate | false | Determines if the tippy will be shown immediately once the instance is created (respecting delay). |
sticky (available as a plugin) | false | Ensures 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 details. |
touch | true | Determines 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", "focusin", "click", "manual". Use "manual" to only trigger the tippy programmatically. |
triggerTarget | null | Which element(s) the trigger event listeners are applied to instead of the reference element. Possible values: null, Element, or Element[]. |
updateDuration | 0 | The transition duration between position updates of the popper element. Useful for the sticky and flipOnUpdate props. |
zIndex | 9999 | Determines the z-index of the tippy. |