---
title: All Props
path: /v5/all-props/
index: 4
---

| Prop                                                           |       Default        | Description                                                                                                                                                                                                                                                                                                                                                                                                                 |
| -------------------------------------------------------------- | :------------------: | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `allowHTML`                                                    |        `true`        | **Determines if `content` strings are parsed as HTML instead of text.** <br /><br /> Make sure you are sanitizing any user data if rendering HTML to prevent XSS attacks.                                                                                                                                                                                                                                                   |
| **`animateFill`** (available as a [plugin](../plugins/))       |       `false`        | **Determines if the background fill color of the tippy should be animated.** <br /><br /> You must import the `dist/backdrop.css` & `animations/shift-away.css` stylesheets for styling to work.                                                                                                                                                                                                                            |
| `animation`                                                    |       `"fade"`       | **The type of transition animation.** <br /><br /> See [Animations](../animations/) for details.                                                                                                                                                                                                                                                                                                                            |
| `appendTo`                                                     |   `document.body`    | **The element to append the tippy to.** <br /><br /> Possible values: `"parent"` (the reference's parentNode), `Element`, `(reference) => Element`. <br /><br /> If `interactive: true`, the default behavior is `appendTo: "parent"` instead of `document.body`. <br /><br /> See [Accessibility](../accessibility/#interactivity) 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. <br /><br /> Possible values: `"describedby"`, `"labelledby"`. Use `null` to prevent the attribute from being added.                                                                                                                                  |
| `arrow`                                                        |        `true`        | **Determines if the tippy has an arrow.** <br /><br /> Possible values: `boolean`, `string` (of SVG), or `SVGElement`. <br /><br /> To use the default round arrow, import `roundArrow` from the package (`tippy.roundArrow` in `iife` version) and pass it as the value. <br /><br /> 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.** <br /><br /> Possible values: `"scrollParent"`, `"window"`, `"viewport"`, or an `HTMLElement`.                                                                                                                                                                                                                                                      |
| `content`                                                      |         `""`         | **The content of the tippy.** <br /><br /> Possible values: `string`, `Element`, or `(reference) => Element`. <br /><br /> 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.** <br /><br /> Possibles values: `number`, `[number, number]` = [show, hide]. <br /><br /> 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.** <br /><br /> Possible values: `number` (px), `string` (with units `"rem"` only). <br /><br /> 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.** <br /><br /> Possibles values: `number`, `[number, number]` = [show, hide]. <br /><br /> 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.** <br /><br /> Possible values: `"flip"`, `Placement[]`. <br /><br /> 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](../plugins/))      |       `false`        | **Determines if the tippy follows the user's mouse cursor.** <br /><br /> Use the strings `"vertical"` or `"horizontal"` to only follow the cursor on a single axis. <br /><br /> Use `"initial"` to place the tippy at the initial cursor position upon show, but prevent following it. <br /><br /> 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).** <br /><br /> For click-triggered tippies, using `false` will prevent the tippy from ever hiding once it is showing. <br /><br /> 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.** <br /><br /> 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](../plugins/)) |       `false`        | **Adds enhanced support for inline element positioning (`display: inline`).** <br /><br /> 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.** <br /><br /> If your tippy appears cut off or invisible, [see the FAQ](../faq/#my-tooltip-appears-cut-off-or-is-not-showing-at-all) 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.** <br /><br /> 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.** <br /><br /> 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.** <br /> <br /> Unlike `distance`, it can work on both axes by using a string in the form `"x, y"`, such as `"50, 20"`. <br /><br /> 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](/lifecycle-hooks/#onafterupdate) invoked after the tippy's props have been updated.**                                                                                                                                                                                                                                                                                                                    |
| `onBeforeUpdate`                                               |        `noop`        | **[Lifecycle hook](/lifecycle-hooks/#onbeforeupdate) invoked before the tippy's props have been updated.**                                                                                                                                                                                                                                                                                                                  |
| `onCreate`                                                     |        `noop`        | **[Lifecycle hook](/lifecycle-hooks/#oncreate) invoked when the tippy has has been created.**                                                                                                                                                                                                                                                                                                                               |
| `onDestroy`                                                    |        `noop`        | **[Lifecycle hook](/lifecycle-hooks/#ondestroy) invoked when the tippy has has been destroyed.**                                                                                                                                                                                                                                                                                                                            |
| `onHidden`                                                     |        `noop`        | **[Lifecycle hook](/lifecycle-hooks/#onhidden) invoked when the tippy has fully transitioned out and is unmounted from the DOM.**                                                                                                                                                                                                                                                                                           |
| `onHide`                                                       |        `noop`        | **[Lifecycle hook](/lifecycle-hooks/#onhide) invoked when the tippy begins to transition out.** <br /><br /> You can cancel hiding by returning `false` from this lifecycle.                                                                                                                                                                                                                                                |
| `onMount`                                                      |        `noop`        | **[Lifecycle hook](/lifecycle-hooks/#onmount) invoked when the tippy has been mounted to the DOM (called after `onShow`).**                                                                                                                                                                                                                                                                                                 |
| `onShow`                                                       |        `noop`        | **[Lifecycle hook](/lifecycle-hooks/#onshow) invoked when the tippy begins to transition in.** <br /><br /> You can cancel showing by returning `false` from this lifecycle.                                                                                                                                                                                                                                                |
| `onShown`                                                      |        `noop`        | **[Lifecycle hook](/lifecycle-hooks/#onshown) invoked when the tippy has fully transitioned in.**                                                                                                                                                                                                                                                                                                                           |
| `onTrigger`                                                    |        `noop`        | **[Lifecycle hook](/lifecycle-hooks/#ontrigger) invoked when the tippy was triggered by a real DOM event (called before `onShow`) to show the tippy.**                                                                                                                                                                                                                                                                      |
| `onUntrigger`                                                  |        `noop`        | **[Lifecycle hook](/lifecycle-hooks/#onuntrigger) 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.** <br /><br /> 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.** <br /><br /> See [Plugins](../plugins/) for details.                                                                                                                                                                                                                                                                                                                                            |
| `popperOptions`                                                |         `{}`         | **Specify custom Popper.js options.** <br /><br /> See the [Popper.js documentation](https://popper.js.org/popper-documentation.html) 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](../plugins/))            |       `false`        | **Ensures the tippy stays stuck to its reference element if it moves around or changes size while showing.** <br /><br /> 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). <br /><br /> 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`.** <br /><br /> See [Themes](../themes/) for details.                                                                                                                                                                                                                                                                              |
| `touch`                                                        |        `true`        | **Determines if the tippy displays if the user is currently using touch input.** <br /><br /> Possible values: `boolean`, `"hold"`, `["hold", number]`. <br /><br /> 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.** <br /><br /> Possible values: `"mouseenter"`, `"focus"`, `"focusin"`, `"click"`, `"manual"`. <br /><br /> 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.** <br /><br /> Possible values: `null`, `Element`, or `Element[]`.                                                                                                                                                                                                                                                        |
| `updateDuration`                                               |         `0`          | **The transition duration between position updates of the popper element.** <br/><br /> Useful for the `sticky` and `flipOnUpdate` props.                                                                                                                                                                                                                                                                                   |
| `zIndex`                                                       |        `9999`        | **Determines the `z-index` of the tippy.**                                                                                                                                                                                                                                                                                                                                                                                  |
