All Options
Below is a table of all the options you can supply.
| Option | Type | Default | Description |
|---|---|---|---|
a11y | boolean | true | Short for accessibility - ensures the reference element can receive focus so the tooltip can be activated by keyboard navigation by adding tabindex="0" to the reference element. |
animateFill | boolean | true | Determines if the background fill color of the tippy should be animated. Disabled if arrow: true. |
allowHTML | boolean | true | Determines 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. |
animation | string | "shift-away" | The type of transition animation. Possible values: "shift-away", "shift-toward", "fade", "scale", "perspective" |
appendTo | string, Element, Function | document.body | The element to append the tippy to. Use "parent" to append it to the reference element's parent node. You can also define a function that takes the reference element as an argument and returns an element. |
aria | string | "describedby" | The aria-* attribute applied to the reference element. Use either "describedby" or "labelledby". Use null to prevent the attribute from being added (recommended for interactive tippys). |
arrow | boolean | false | Determines if an arrow should be added to the tippy pointing toward the reference element. |
arrowType | string | "sharp" | Determines the arrow type. Possible values: "sharp", "round" |
boundary | string, HTMLElement | "scrollParent" | The boundary that Popper.js' preventOverflow modifier adheres to. Possible values: "scrollParent", "window", "viewport", or an HTMLElement. |
content | string, Element, Function | "" | The content of the tippy. Along with a string or element, you can use a function that receives the reference element as an argument and returns some content. |
delay | number, [show, hide] | [0, 20] | Delay in ms once a trigger event is fired before a tippy shows or hides. Specifying a number means both the show and hide delays are the same. Use null in the array to use the default value. |
duration | number, [show, hide] | [275, 250] | Duration of the CSS transition animation in ms. Specifying a number means both the show and hide delays are the same. Use null in the array to use the default value. |
distance | number | 10 | 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 the offset option. |
flip | boolean | true | 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 | string, string[] | "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". |
flipOnUpdate | boolean | 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 | boolean, string | 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, only "initial" places it at the touch position - the other values will position it normally. |
hideOnClick | boolean, string | true | Determines if the tippy should hide if a click 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". |
ignoreAttributes | boolean | false | Determines if data-tippy-* attributes on the reference element should be ignored. Increases performance if you enable it. |
inertia | boolean | false | Determines if an inertial slingshot effect is applied to the CSS animation. |
interactive | boolean | false | Determines if the tippy is interactive, i.e. it can be hovered over or clicked without hiding. |
interactiveBorder | number | 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 | number | 0 | Debounces the internal onMouseMove handler which determines when an interactive tippy should hide. |
lazy | boolean | 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 | number, string | 350 | Determines the maximum width of the tippy. Use a number for pixels, or a string to add units such as rem. |
multiple | boolean | false | Determines if the reference element can have multiple tippys applied to it. |
offset | number, string | 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 this option if using interactive: true. |
onHidden | Function | noop | Lifecycle function invoked when the tippy has fully transitioned out and is unmounted from the DOM. Receives the instance as an argument. |
onHide | Function | noop | Lifecycle function invoked when the tippy begins to transition out. You can cancel hiding by returning false from this lifecycle. Receives the instance as an argument. |
onMount | Function | noop | Lifecycle function invoked when the tippy has been mounted to the DOM (called after onShow). Receives the instance as an argument. |
onShow | Function | noop | Lifecycle function invoked when the tippy begins to transition in. You can cancel showing by returning false from this lifecycle. Receives the instance as an argument. |
onShown | Function | noop | Lifecycle function invoked when the tippy has fully transitioned in. Receives the instance as an argument. |
onTrigger | Function | noop | Lifecycle function invoked when the tippy was triggered by a real DOM event (called before onShow). Receives the instance as its first argument and the event object as its second argument. |
placement | string | "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 | object | {} | Specify custom Popper.js options. See the Popper.js documentation for more. |
role | string | "tooltip" | Specifies the role attribute on the tippy element. |
showOnInit | boolean | false | Determines if the tippy will be shown immediately once the instance is initialized. |
size | string | "regular" | Determines the size of the tippy, defined in CSS. Possible values: "small", "regular", "large" |
sticky | boolean | false | Ensures the tippy stays stuck to its reference element if it moves around while showing. See the updateDuration option to change the transition duration between position updates. |
target | string | "" | CSS selector string used for event delegation. See Event delegation for more information. |
theme | string | "dark" | Themes added as classes (each separated by a space) to the tippy element's classList. |
touch | boolean | true | Determines if the tippy displays if the user is currently using touch input. |
touchHold | boolean | false | 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 | string | "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. |
triggerTarget | Element | null | Which element the trigger event listeners are applied to (instead of the reference element). |
updateDuration | number | 0 | The transition duration between position updates for the sticky and flipOnUpdate options. |
wait | Function | null | A function that, when defined, will wait until you manually invoke the show() method when a tippy is triggered. It takes the tippy instance as the first argument, and the trigger event as the second argument. |
zIndex | number | 9999 | Determines the z-index of the tippy. |