--- 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.**

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.**

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](../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](../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.

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](../plugins/)) | `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](../plugins/)) | `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](../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.**

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](/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.**

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.**

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.**

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](../plugins/) for details. | | `popperOptions` | `{}` | **Specify custom Popper.js options.**

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.**

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](../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.** |