# Table of Contents

- [Tippy.js - Tooltip and Popover Library](#tippy-js-tooltip-and-popover-library)
- [Getting Started | Tippy.js](#getting-started-tippy-js)
- [Creating Tooltips | Tippy.js](#creating-tooltips-tippy-js)
- [Customizing Tooltips | Tippy.js](#customizing-tooltips-tippy-js)
- [Themes | Tippy.js](#themes-tippy-js)
- [Tippy Instance | Tippy.js](#tippy-instance-tippy-js)
- [HTML Content | Tippy.js](#html-content-tippy-js)
- [All Props | Tippy.js](#all-props-tippy-js)
- [Lifecycle Hooks | Tippy.js](#lifecycle-hooks-tippy-js)
- [Animations | Tippy.js](#animations-tippy-js)
- [Addons | Tippy.js](#addons-tippy-js)
- [AJAX | Tippy.js](#ajax-tippy-js)
- [Methods | Tippy.js](#methods-tippy-js)
- [Accessibility | Tippy.js](#accessibility-tippy-js)
- [Misc | Tippy.js](#misc-tippy-js)
- [Motivation | Tippy.js](#motivation-tippy-js)
- [Plugins | Tippy.js](#plugins-tippy-js)
- [FAQ | Tippy.js](#faq-tippy-js)

---

# Tippy.js - Tooltip and Popover Library

[Skip to content](https://tippyjs.bootcss.com/#reach-skip-nav)

Demo
----

Tippy.js is a highly customizable tooltip and popover library powered by [Popper.js](https://popper.js.org/)
.

*   🧠 **Smart:** optimized positioning engine for flipping and overflow prevention
*   ⚡ **Fast:** high performance for low-end devices
*   🖱️ **Universal:** works with mouse, keyboard, and touch inputs
*   ♿ **Accessible:** WAI-ARIA compatible
*   🖌 **Themeable:** style via custom CSS, includes extra themes and animations
*   🔌 **Pluggable:** enhance functionality with plugins
*   🌳 **Tree-shakable:** minimize bundle size by importing what you need
*   🧩 **Typed:** TypeScript support out of the box
*   🌐 **Supports IE11+:** compatible with 99% of desktop and 97% of mobile users

Ready to start? Visit [Getting Started](https://tippyjs.bootcss.com/getting-started/)
, or view a demo of Tippy's features below.

* * *

### [#](https://tippyjs.bootcss.com/#default)
Default

The default tippy tooltip looks like this:

My Button

It has a background color of `#333` and an arrow pointing toward the element, and is triggered by either `mouseenter` or `focus` events so it appears when hovered, focused via keyboard navigation, or tapped when using a touch device.

With a button element on the document like this:

    <button id="myButton">My Button</button>

You can initialize it like so:

    tippy('#myButton', {
      content: "I'm a Tippy tooltip!"
    });

* * *

### [#](https://tippyjs.bootcss.com/#placement)
Placement

Tooltips can be placed in four base ways in relation to the reference element. Additionally, the tooltip can be shifted along the axis using the suffix `-start` or `-end`.

top

top-start

top-end

right

right-start

right-end

bottom

bottom-start

bottom-end

left

left-start

left-end

If a tippy cannot fit within its desired placement, it will flip to the opposite placement if there is not enough space. In the above examples, flipping has been disabled to demonstrate each placement properly.

* * *

### [#](https://tippyjs.bootcss.com/#arrows)
Arrows

The arrow that points toward the element can have its proportion or shape modified, or be disabled completely.

DefaultRoundLargeSmallWideNarrow

* * *

### [#](https://tippyjs.bootcss.com/#animations)
Animations

Tooltips can have different types of transition animations. By default, it's a simple `fade` (opacity transition).

#### [#](https://tippyjs.bootcss.com/#extra-included-animations)
Extra included animations

These animations are included in the package and can be imported separately.

shift-away

shift-away-subtle

shift-away-extreme

shift-toward

shift-toward-subtle

shift-toward-extreme

scale

scale-subtle

scale-extreme

perspective

perspective-subtle

perspective-extreme

#### [#](https://tippyjs.bootcss.com/#material-filling-effect-1)
Material filling effect

Text

#### [#](https://tippyjs.bootcss.com/#inertia-/-slingshot-elastic-effect)
Inertia / slingshot elastic effect

Add CSS spring physics to the animation using `transition-timing-function`.

scalescale-subtlescale-extreme

#### [#](https://tippyjs.bootcss.com/#css-keyframe-animations)
CSS keyframe animations

Getting more advanced, you can use actual CSS animations (`@keyframes` rules), for example using the `animate.css` package:

rubberBandtada

#### [#](https://tippyjs.bootcss.com/#duration)
Duration

01000\[0, 500\]\[500, 0\]

* * *

### [#](https://tippyjs.bootcss.com/#themes)
Themes

Tooltips can have custom styling.

#### [#](https://tippyjs.bootcss.com/#included-themes)
Included themes

These themes are included in the package and can be imported separately.

lightlight-bordermaterialtranslucent

#### [#](https://tippyjs.bootcss.com/#custom-themes)
Custom themes

You can apply any CSS to a tippy via a theme.

gradientretroforest

* * *

### [#](https://tippyjs.bootcss.com/#triggers)
Triggers

Tooltips can also be triggered by `click` or `focus` events.

ClickFocus

* * *

### [#](https://tippyjs.bootcss.com/#interactivity-1)
Interactivity

Tooltips can be interactive, allowing you to hover over and click inside them.

Interactive

* * *

### [#](https://tippyjs.bootcss.com/#html-content)
HTML Content

Tooltips can contain HTML.

HTML ContentDropdown

* * *

### [#](https://tippyjs.bootcss.com/#delay)
Delay

Tooltips can delay hiding or showing after a trigger.

500\[800, 0\]\[0, 800\]

* * *

### [#](https://tippyjs.bootcss.com/#follow-cursor)
Follow Cursor

Tooltips can follow the mouse cursor and abide by a certain axis. Additionally, the tooltip can follow the cursor until it shows, at which point it will stop following (initial).

DefaultHorizontalVerticalInitial

* * *

### [#](https://tippyjs.bootcss.com/#svgs)
SVGs

Tooltips can be placed on SVG nodes, where `followCursor: 'initial'` becomes very useful, since it can be placed directly on the line.

* * *

### [#](https://tippyjs.bootcss.com/#singleton-1)
Singleton

Use a single tooltip for many different reference elements. This allows you to "group" tooltips with a shared timer to improve UX when elements near each other have tooltips with a `delay` prop.

Non-singleton tippy with `delay: 500`:

TextTextTextText

Singleton tippy to group each tippy's `delay: 500`:

TextTextTextText

Singleton tippy with a transition:

TextTextTextText

* * *

### [#](https://tippyjs.bootcss.com/#nesting)
Nesting

A tippy can be nested within another one.

Level 0

This allows you to create a hover menu system.

* * *

### [#](https://tippyjs.bootcss.com/#multiple)
Multiple

Attach many tippies to a single element.

Hover me

* * *

### [#](https://tippyjs.bootcss.com/#miscellaneous)
Miscellaneous

OffsetDistanceMax width

  

The above is not a complete list of features. There are plenty more!

[Getting Started](https://tippyjs.bootcss.com/getting-started/)

---

# Getting Started | Tippy.js

[Skip to content](https://tippyjs.bootcss.com/getting-started/#reach-skip-nav)

Getting Started
---------------

There are two ways to install the package.

### [#](https://tippyjs.bootcss.com/getting-started/#1-package-manager)
1\. Package Manager

    # npm
    npm i tippy.js
    
    # Yarn
    yarn add tippy.js

In your application, import the `tippy` module, and the core CSS:

    import tippy from 'tippy.js';
    import 'tippy.js/dist/tippy.css';

This assumes you're using a module bundler like webpack, Rollup, or Parcel. If you're getting an error message about `process` inside the browser, [see the FAQ for help.](https://tippyjs.bootcss.com/faq/#im-getting-uncaught-referenceerror-process-is-not-defined)

### [#](https://tippyjs.bootcss.com/getting-started/#2-cdn)
2\. CDN

    <script src="https://unpkg.com/popper.js@1"></script>
    <script src="https://unpkg.com/tippy.js@5"></script>

Place them at the very bottom of the `<body>`, ensuring they are placed before your own scripts. The version numbers after `@` are important, make sure they don't get removed.

#### [#](https://tippyjs.bootcss.com/getting-started/#development-version)
Development version

While developing, it's recommended to use the development file which includes helpful warnings and error messages when something goes wrong:

    <script src="https://unpkg.com/popper.js@1"></script>
    <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>

When you're finished developing (or deploying for production), you can remove everything after `@5` (the production file as listed before).

### [#](https://tippyjs.bootcss.com/getting-started/#node-vs-browser)
Node vs. Browser

This documentation defaults to module imports in all examples, so be aware that the following import path using a module bundler in Node:

    import 'tippy.js/dist/backdrop.css';

Is equivalent to this using a CDN in the browser:

    <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/backdrop.css" />

### [#](https://tippyjs.bootcss.com/getting-started/#css)
CSS

Tippy includes a CSS stylesheet by default for the base tooltip styling, fade animation, CSS arrows, and other required CSS.

#### [#](https://tippyjs.bootcss.com/getting-started/#cdn)
CDN

When including the script link above via CDN, the CSS stylesheet is injected into its own `<style>` tag in `<head>`. If you have CSP enabled, you should use `dist/tippy.iife.js` and link the stylesheet `dist/tippy.css` separately instead of relying on injection.

#### [#](https://tippyjs.bootcss.com/getting-started/#contents)
Contents

[View the package contents on unpkg](https://unpkg.com/tippy.js@5/)

*   `dist/tippy-bundle.js` = Core JS + Core CSS injected into `<head>` (default for CDN version)
*   `dist/tippy.js` = Core JS (default for ESM/CJS versions)
*   `dist/tippy.css` = Core CSS

### [#](https://tippyjs.bootcss.com/getting-started/#component-wrappers)
Component wrappers

*   React: [@tippy.js/react](https://github.com/atomiks/tippy.js-react)
    

### [#](https://tippyjs.bootcss.com/getting-started/#javascript-syntax)
JavaScript syntax

This documentation is making use of new JavaScript features (ES6+) that old browsers like IE11 do not support. Although Tippy.js itself supports IE11, the code written in these docs may need to be transpiled using a tool like Babel to a compatible format if you want to copy and paste it.

[Demo](https://tippyjs.bootcss.com/)
[Creating Tooltips](https://tippyjs.bootcss.com/creating-tooltips/)

---

# Creating Tooltips | Tippy.js

[Skip to content](https://tippyjs.bootcss.com/creating-tooltips/#reach-skip-nav)

Creating Tooltips
-----------------

Give elements you would like to give tooltips to a `data-tippy-content` attribute:

    <button data-tippy-content="Tooltip">Text</button>
    <button data-tippy-content="Another Tooltip">Text</button>

To give them a tippy tooltip, call the `tippy()` function with a CSS selector matching these elements:

    tippy('[data-tippy-content]');

The `data-tippy-content` attribute allows you to give different tooltip content to many different elements, while only needing to initialize once.

If targeting a single element, you can use the `content` prop instead of the attribute:

    tippy('#singleElement', {
      content: 'Tooltip'
    });

Tippy will create tooltips for elements even if you forget to give them content, which creates an odd shape with no content, so ensure your CSS selector is specific enough to guarantee their content.

### [#](https://tippyjs.bootcss.com/creating-tooltips/#content-types)
Content types

Plain text and HTML (string or element) are allowed.

If you're passing unknown user data to `content`, disable HTML for safety, unless explicitly sanitizing it:

    tippy('#singleElement', {
      content: unsafeUserData,
      allowHTML: false
    });

### [#](https://tippyjs.bootcss.com/creating-tooltips/#target-types)
Target types

The first argument you pass to `tippy()` is the targets you want to give tooltips to. This can represent one or many different elements.

    // String (CSS selector matching elements on the document)
    tippy('#id');
    tippy('.class');
    tippy('[data-tippy-content]');
    
    // Element
    tippy(document.getElementById('my-element'));
    
    // Element[]
    tippy([element1, element2, element3]);
    
    // NodeList
    tippy(document.querySelectorAll('.my-elements'));

### [#](https://tippyjs.bootcss.com/creating-tooltips/#disabled-elements)
Disabled elements

If an element is disabled, you will need to use a wrapper element (`<span>` or `<div>`) in order for the tippy to work. Elements with the disabled attribute aren't interactive, meaning users cannot focus, hover, or click them to trigger a tippy.

    <!-- Won't work! -->
    <button data-tippy-content="Tooltip" disabled>Text</button>
    
    <!-- Wrapper <span> will work -->
    <span data-tippy-content="Tooltip" tabindex="0">
      <button disabled>Text</button>
    </span>

Please note that this has accessibility concerns and should be avoided if possible.

### [#](https://tippyjs.bootcss.com/creating-tooltips/#svg-in-ie11)
SVG in IE11

If you need to support SVG elements in IE11, you will need to include a polyfill for `SVGElement.prototype.contains`.

The polyfill is small:

    if (!SVGElement.prototype.contains) {
      SVGElement.prototype.contains = HTMLDivElement.prototype.contains;
    }

[Getting Started](https://tippyjs.bootcss.com/getting-started/)
[Customizing Tooltips](https://tippyjs.bootcss.com/customizing-tooltips/)

---

# Customizing Tooltips | Tippy.js

[Skip to content](https://tippyjs.bootcss.com/customizing-tooltips/#reach-skip-nav)

Customizing Tooltips
--------------------

As seen in the demo, the `tippy()` function takes an object of optional props as a second argument to customize the tooltips being created:

    tippy('button', {
      duration: 0,
      arrow: false,
      delay: [1000, 200]
    });

You can also specify props on the element using data attributes:

    <button
      data-tippy-duration="0"
      data-tippy-arrow="false"
      data-tippy-delay="[1000, 200]"
    >
      Text
    </button>

Note that only JSON values are valid in attributes.

It can be useful to use the function for "global" config and choose attributes for individual config here and there:

    <button>Default</button>
    <button data-tippy-content="hello">I have my own content</button>
    <button data-tippy-arrow="true">I have my own option</button>

    // Global config for all <button>s
    tippy('button', {
      content: 'Global content',
      trigger: 'click'
    });

### [#](https://tippyjs.bootcss.com/customizing-tooltips/#default-props)
Default props

Often you don't want to specify props over and over again when initializing tooltips. You can set the default props for every new tippy instance with the `tippy.setDefaultProps()` method:

    tippy.setDefaultProps({delay: 50});

[Creating Tooltips](https://tippyjs.bootcss.com/creating-tooltips/)
[All Props](https://tippyjs.bootcss.com/all-props/)

---

# Themes | Tippy.js

[Skip to content](https://tippyjs.bootcss.com/themes/#reach-skip-nav)

Themes
------

Tippies can have any custom styling via CSS.

### [#](https://tippyjs.bootcss.com/themes/#included-themes-1)
Included themes

The package comes with themes for you to use:

*   `light`
*   `light-border`
*   `material`
*   `translucent`

They need to be imported separately.

    import 'tippy.js/themes/light.css';

Pass the theme name as the `theme` prop:

    tippy('button', {
      theme: 'light'
    });

### [#](https://tippyjs.bootcss.com/themes/#tippy-elements)
Tippy elements

To learn how to create a theme, it's helpful to understand the basic structure of a tippy element:

    <div class="tippy-popper">
      <div class="tippy-tooltip" data-placement="top">
        <div class="tippy-content">
          My content
        </div>
      </div>
    </div>

A tippy is essentially three nested `div`s.

*   `tippy-popper` is the outermost node. It is what Popper.js uses to position the tippy. You don't need to apply any styles to this element.
*   `tippy-tooltip` is the actual tooltip node.
*   `tippy-content` is the content node.

Depending on the props supplied, there will exist other elements inside it:

    <div class="tippy-popper">
      <div class="tippy-tooltip" data-placement="top">
        <div class="tippy-backdrop"></div> <!-- animateFill: true -->
        <div class="tippy-arrow"></div> <!-- arrow: true -->
        <div class="tippy-content">
          My content
        </div>
      </div>
    </div>

### [#](https://tippyjs.bootcss.com/themes/#creating-a-theme)
Creating a theme

Themes are created by including a class on the `tippy-tooltip` element as part of a selector in the form `.tippy-tooltip.x-theme`. Let's demonstrate this by creating our own theme called `tomato`:

    .tippy-tooltip.tomato-theme {
      background-color: tomato;
      color: yellow;
    }

To apply the theme, specify a `theme` prop without the `-theme` suffix:

    tippy('button', {
      theme: 'tomato'
    });

Tomato theme

### [#](https://tippyjs.bootcss.com/themes/#styling-the-arrow)
Styling the arrow

There are two types of arrows:

*   CSS arrows (using `border-width`)
*   SVG arrows (using an `<svg>` element)

#### [#](https://tippyjs.bootcss.com/themes/#css-arrow)
CSS arrow

To style the default CSS arrow, you'll need to target each different base placement using the `data-placement` attribute and apply it to the `.tippy-arrow` element:

    .tippy-tooltip.tomato-theme[data-placement^='top'] .tippy-arrow {
      border-top-color: tomato;
    }
    .tippy-tooltip.tomato-theme[data-placement^='bottom'] .tippy-arrow {
      border-bottom-color: tomato;
    }
    .tippy-tooltip.tomato-theme[data-placement^='left'] .tippy-arrow {
      border-left-color: tomato;
    }
    .tippy-tooltip.tomato-theme[data-placement^='right'] .tippy-arrow {
      border-right-color: tomato;
    }

#### [#](https://tippyjs.bootcss.com/themes/#svg-arrow)
SVG arrow

First import the `svg-arrow.css` stylesheet for SVG arrow styling:

    import 'tippy.js/dist/svg-arrow.css';

To color an SVG arrow, specify `fill` and target `.tippy-svg-arrow`:

    .tippy-tooltip.tomato-theme .tippy-svg-arrow {
      fill: tomato;
    }

The shape isn't dependent on the placement for styling, which is why it doesn't require the CSS arrow's more verbose styles.

There is a default round arrow SVG shape exported from the package for you to use.

#### [#](https://tippyjs.bootcss.com/themes/#cdn-iife-1)
CDN (iife)

    tippy(targets, {
      arrow: tippy.roundArrow
    });

#### [#](https://tippyjs.bootcss.com/themes/#node-esm-or-cjs-1)
Node (esm or cjs)

    import {roundArrow} from 'tippy.js';
    
    tippy(targets, {
      arrow: roundArrow
    });

CSS arrowSVG arrow

### [#](https://tippyjs.bootcss.com/themes/#changing-the-arrow-size)
Changing the arrow size

#### [#](https://tippyjs.bootcss.com/themes/#option-1-[object-object])
Option 1: `transform: scale()`

This is the easiest technique and works for most cases:

    .tippy-tooltip.tomato-theme .tippy-arrow {
      transform: scale(1.5);
    }

#### [#](https://tippyjs.bootcss.com/themes/#option-2-pixel-increase)
Option 2: Pixel increase

If your tippy theme has a `border` (e.g. the included `light-border` theme), then the `transform: scale()` technique distorts the border width of the arrow. Instead, you will need to change the size of the arrow in pixels directly.

You will also need to change the size of the border pseudo-elements (`::before` and `::after`) as well. It's recommended to investigate the CSS of the arrow via DevTools.

    .tippy-tooltip.tomato-theme[data-placement^='top'] .tippy-arrow {
      border-width: 12px 12px 0;
      border-top-color: tomato;
    }
    
    /* And so on for each placement... */

Scaled arrow

#### [#](https://tippyjs.bootcss.com/themes/#browser-devtools)
Browser DevTools

It's highly recommended you inspect a tippy element via your browser's DevTools. An easy way to do this is to give it `hideOnClick: false` and `trigger: 'click'` props so that it stays visible when focus is switched to the DevTools window.

The tippy element gets appended to the very end of the `<body>`, so you should scroll down the elements panel. If `interactive: true`, then the tippy is appended to the reference element's parentNode instead.

![](data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAHABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAEF/8QAFgEBAQEAAAAAAAAAAAAAAAAAAgAB/9oADAMBAAIQAxAAAAHMgxBl/8QAFBABAAAAAAAAAAAAAAAAAAAAEP/aAAgBAQABBQJ//8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAIAQMBAT8Bqv/EABURAQEAAAAAAAAAAAAAAAAAAAAR/9oACAECAQE/AYj/xAAUEAEAAAAAAAAAAAAAAAAAAAAQ/9oACAEBAAY/An//xAAYEAADAQEAAAAAAAAAAAAAAAAAIVERcf/aAAgBAQABPyHODo6f/9oADAMBAAIAAwAAABAEP//EABURAQEAAAAAAAAAAAAAAAAAAAAR/9oACAEDAQE/ELW//8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAIAQIBAT8QlL//xAAbEAEAAgIDAAAAAAAAAAAAAAABABEhUWGBkf/aAAgBAQABPxAQWNkzceI7ZWz2f//Z)

[HTML Content](https://tippyjs.bootcss.com/html-content/)
[Animations](https://tippyjs.bootcss.com/animations/)

---

# Tippy Instance | Tippy.js

[Skip to content](https://tippyjs.bootcss.com/tippy-instance/#reach-skip-nav)

Tippy Instance
--------------

A tippy instance is an individual tippy object. It has a bunch of properties and methods that contain information and functionality to manipulate the tippy programmatically.

### [#](https://tippyjs.bootcss.com/tippy-instance/#accessing-an-instance)
Accessing an instance

`tippy()` creates new instances. It returns a single instance or an array of instances depending on the type of argument it's supplied.

#### [#](https://tippyjs.bootcss.com/tippy-instance/#element-1)
Element

The instance is directly returned, as this represents a single target:

    // type Instance
    const instance = tippy(document.querySelector('button'));

#### [#](https://tippyjs.bootcss.com/tippy-instance/#string-nodelist-element[])
String, NodeList, Element\[\]

An array of instances are returned, as these represent multiple targets:

    // type Instance[]
    const instances1 = tippy('button');
    const instances2 = tippy([element1, element2]);
    const instances3 = tippy(document.querySelectorAll('.btn'));

#### [#](https://tippyjs.bootcss.com/tippy-instance/#[object-object]-property)
`_tippy` property

If you need to access the instance later, this property can be useful if you didn't assign the instance(s) to a variable:

    const button = document.querySelector('button');
    tippy(button);
    const instance = button._tippy;

Both the reference element and the popper element have the instance attached as this property.

### [#](https://tippyjs.bootcss.com/tippy-instance/#shape-and-properties)
Shape and properties

`instance` is a plain object. It's best to log it out yourself and investigate in DevTools:

    console.log(instance);

[Animations](https://tippyjs.bootcss.com/animations/)
[Methods](https://tippyjs.bootcss.com/methods/)

---

# HTML Content | Tippy.js

[Skip to content](https://tippyjs.bootcss.com/html-content/#reach-skip-nav)

HTML Content
------------

The `content` prop can accept a string, element, or function.

To interact with the content inside the tippy, set `interactive: true`.

### [#](https://tippyjs.bootcss.com/html-content/#string)
String

    tippy('button', {
      content: '<strong>Bolded content</strong>'
    });

> **Note**
> 
> Ensure HTML strings containing user data are sanitized properly to prevent XSS attacks.

#### [#](https://tippyjs.bootcss.com/html-content/#elementinnerhtml)
Element.innerHTML

You can pass in an element's `.innerHTML` string:

    <div id="template" style="display: none;">
      <strong>Bolded content</strong>
    </div>

    const template = document.getElementById('template');
    
    tippy('button', {
      content: template.innerHTML
    });

### [#](https://tippyjs.bootcss.com/html-content/#element)
Element

You can pass the element itself, which is useful for keeping event listeners attached (or when a framework is controlling elements inside):

    const template = document.getElementById('example');
    template.style.display = 'block';
    
    tippy(singleButton, {
      content: template
    });

This differs from passing a `string` in that a single element can only exist in a single tippy. The template will be moved from the document and into the tippy itself.

### [#](https://tippyjs.bootcss.com/html-content/#template-linking)
Template linking

If you have multiple references each with their own unique template, there is a way to link them with their associated template:

    <button data-template="one">One</button>
    <button data-template="two">Two</button>
    <button data-template="three">Three</button>
    
    <div style="display: none;">
      <div id="one">
        <strong>Content for `one`</strong>
      </div>
      <div id="two">
        <strong>Content for `two`</strong>
      </div>
      <div id="three">
        <strong>Content for `three`</strong>
      </div>
    </div>

We can make `content` a function that receives the reference element (button in this case) and returns template content:

    tippy('button', {
      content(reference) {
        const id = reference.getAttribute('data-template');
        const template = document.getElementById(id);
        return template.innerHTML;
      }
    });

[All Props](https://tippyjs.bootcss.com/all-props/)
[Themes](https://tippyjs.bootcss.com/themes/)

---

# All Props | Tippy.js

[Skip to content](https://tippyjs.bootcss.com/all-props/#reach-skip-nav)

All Props
---------

| 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](https://tippyjs.bootcss.com/plugins/)<br>) | `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](https://tippyjs.bootcss.com/animations/)<br> 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](https://tippyjs.bootcss.com/accessibility/#interactivity)<br> 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](https://tippyjs.bootcss.com/plugins/)<br>) | `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](https://tippyjs.bootcss.com/plugins/)<br>) | `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](https://atomiks.github.io/tippyjs/faq/#my-tooltip-appears-cut-off-or-is-not-showing-at-all)<br> 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](https://tippyjs.bootcss.com/lifecycle-hooks/#onafterupdate)<br> invoked after the tippy's props have been updated.** |
| `onBeforeUpdate` | `noop` | **[Lifecycle hook](https://tippyjs.bootcss.com/lifecycle-hooks/#onbeforeupdate)<br> invoked before the tippy's props have been updated.** |
| `onCreate` | `noop` | **[Lifecycle hook](https://tippyjs.bootcss.com/lifecycle-hooks/#oncreate)<br> invoked when the tippy has has been created.** |
| `onDestroy` | `noop` | **[Lifecycle hook](https://tippyjs.bootcss.com/lifecycle-hooks/#ondestroy)<br> invoked when the tippy has has been destroyed.** |
| `onHidden` | `noop` | **[Lifecycle hook](https://tippyjs.bootcss.com/lifecycle-hooks/#onhidden)<br> invoked when the tippy has fully transitioned out and is unmounted from the DOM.** |
| `onHide` | `noop` | **[Lifecycle hook](https://tippyjs.bootcss.com/lifecycle-hooks/#onhide)<br> invoked when the tippy begins to transition out.**  <br>  <br>You can cancel hiding by returning `false` from this lifecycle. |
| `onMount` | `noop` | **[Lifecycle hook](https://tippyjs.bootcss.com/lifecycle-hooks/#onmount)<br> invoked when the tippy has been mounted to the DOM (called after `onShow`).** |
| `onShow` | `noop` | **[Lifecycle hook](https://tippyjs.bootcss.com/lifecycle-hooks/#onshow)<br> invoked when the tippy begins to transition in.**  <br>  <br>You can cancel showing by returning `false` from this lifecycle. |
| `onShown` | `noop` | **[Lifecycle hook](https://tippyjs.bootcss.com/lifecycle-hooks/#onshown)<br> invoked when the tippy has fully transitioned in.** |
| `onTrigger` | `noop` | **[Lifecycle hook](https://tippyjs.bootcss.com/lifecycle-hooks/#ontrigger)<br> invoked when the tippy was triggered by a real DOM event (called before `onShow`) to show the tippy.** |
| `onUntrigger` | `noop` | **[Lifecycle hook](https://tippyjs.bootcss.com/lifecycle-hooks/#onuntrigger)<br> 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](https://tippyjs.bootcss.com/plugins/)<br> for details. |
| `popperOptions` | `{}` | **Specify custom Popper.js options.**  <br>  <br>See the [Popper.js documentation](https://popper.js.org/popper-documentation.html)<br> 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](https://tippyjs.bootcss.com/plugins/)<br>) | `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](https://tippyjs.bootcss.com/themes/)<br> 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.** |

[Customizing Tooltips](https://tippyjs.bootcss.com/customizing-tooltips/)
[HTML Content](https://tippyjs.bootcss.com/html-content/)

---

# Lifecycle Hooks | Tippy.js

[Skip to content](https://tippyjs.bootcss.com/lifecycle-hooks/#reach-skip-nav)

Lifecycle Hooks
---------------

Lifecycle hooks provide a way to run code in response to a certain part of a tippy's lifecycle. They are listed here in the usual order in which they occur. Every lifecycle hook takes the [`instance`](https://tippyjs.bootcss.com/tippy-instance/)
 as its first argument.

These functions are how you hook into a tippy instance's lifecycle to add functionality via a [plugin](https://tippyjs.bootcss.com/plugins/)
.

#### [#](https://tippyjs.bootcss.com/lifecycle-hooks/#oncreate)
onCreate

Executed a single time when a tippy is first created.

    tippy(reference, {
      onCreate(instance) {
        // ...
      }
    });

#### [#](https://tippyjs.bootcss.com/lifecycle-hooks/#ontrigger)
onTrigger

Executed when a tippy is triggered by a DOM event (e.g. mouseenter, focus, click), but before it starts to show.

    tippy(reference, {
      onTrigger(instance, event) {
        // ...
      }
    });

#### [#](https://tippyjs.bootcss.com/lifecycle-hooks/#onshow)
onShow

Executed when a tippy begins to show, but before it gets mounted to the DOM.

You can optionally return `false` to cancel the tippy from showing.

    tippy(reference, {
      onShow(instance) {
        // ...
        return false; // cancels it
      }
    });

> **Note:** plugins ignore `return false` due to compositional issues. Only a tippy instance's own props can use this feature.

#### [#](https://tippyjs.bootcss.com/lifecycle-hooks/#onmount)
onMount

Executed when the tippy element is mounted to the DOM.

    tippy(reference, {
      onMount(instance) {
        // ...
      }
    });

#### [#](https://tippyjs.bootcss.com/lifecycle-hooks/#onshown)
onShown

Executed when a tippy has fully transitioned in.

    tippy(reference, {
      onShown(instance) {
        // ...
      }
    });

#### [#](https://tippyjs.bootcss.com/lifecycle-hooks/#onuntrigger)
onUntrigger

Executed when a tippy was untriggered by a DOM event (e.g. mouseleave, blur, click), but before it starts to hide.

    tippy(reference, {
      onUntrigger(instance, event) {
        // ...
      }
    });

#### [#](https://tippyjs.bootcss.com/lifecycle-hooks/#onhide)
onHide

Executed when a tippy begins to hide and transition out.

You can optionally return `false` to cancel the tippy from hiding.

    tippy(reference, {
      onHide(instance) {
        // ...
        return false; // cancels it
      }
    });

> **Note:** plugins ignore `return false` due to compositional issues. Only a tippy instance's own props can use this feature.

#### [#](https://tippyjs.bootcss.com/lifecycle-hooks/#onhidden)
onHidden

Executed when a tippy has fully transitioned out and unmounted from the DOM.

    tippy(reference, {
      onHidden(instance) {
        // ...
      }
    });

#### [#](https://tippyjs.bootcss.com/lifecycle-hooks/#onbeforeupdate)
onBeforeUpdate

Executed before a tippy's props are updated (via `.setContent()` or `.setProps()`).

    tippy(reference, {
      onBeforeUpdate(instance, updatedProps) {
        // ...
      }
    });

#### [#](https://tippyjs.bootcss.com/lifecycle-hooks/#onafterupdate)
onAfterUpdate

Executed after a tippy's props are updated (via `.setContent()` or `.setProps()`).

    tippy(reference, {
      onAfterUpdate(instance, updatedProps) {
        // ...
      }
    });

#### [#](https://tippyjs.bootcss.com/lifecycle-hooks/#ondestroy)
onDestroy

Executed a single time when a tippy is destroyed.

    tippy(reference, {
      onDestroy(instance) {
        // ...
      }
    });

[Methods](https://tippyjs.bootcss.com/methods/)
[AJAX](https://tippyjs.bootcss.com/ajax/)

---

# Animations | Tippy.js

[Skip to content](https://tippyjs.bootcss.com/animations/#reach-skip-nav)

Animations
----------

Tippies use an opacity `fade` transition by default.

### [#](https://tippyjs.bootcss.com/animations/#included-animations)
Included animations

The package comes with extra animations for you to use:

*   `shift-away`
*   `shift-toward`
*   `scale`
*   `perspective`

They need to be imported separately.

    import 'tippy.js/animations/scale.css';

Pass the animation name as the `animation` prop:

    tippy('button', {
      animation: 'scale'
    });

Each of these animations also has 3 variants (normal, subtle, and extreme) using the following format:

    import 'tippy.js/animations/scale.css';
    import 'tippy.js/animations/scale-subtle.css';
    import 'tippy.js/animations/scale-extreme.css';

### [#](https://tippyjs.bootcss.com/animations/#custom-animations)
Custom animations

To create your own animation:

*   Specify the animation name in the `[data-animation]` attribute selector
*   Target the visibility state of the tippy: `[data-state="hidden"]` or `[data-state="visible"]`
*   Depending on the animation, target the placement of the tippy too: e.g. `[data-placement^="top"]`

    .tippy-tooltip[data-animation='rotate'][data-state='hidden'] {
      opacity: 0;
      transform: rotate(90deg);
    }

    tippy('button', {
      animation: 'rotate'
    });

### [#](https://tippyjs.bootcss.com/animations/#inertia)
Inertia

There's a prop named `inertia` that adds an elastic inertial effect to the tippy, which is a limited CSS-only way to mimic spring physics.

    tippy('button', {
      inertia: true
    });

You can customize this prop in your CSS:

    .tippy-tooltip[data-inertia][data-state='visible'] {
      transition-timing-function: cubic-bezier(...);
    }

### [#](https://tippyjs.bootcss.com/animations/#material-filling-effect)
Material filling effect

Import the `animateFill` plugin, plus `dist/backdrop.css` & `animations/shift-away.css` stylesheets.

    import tippy, {animateFill} from 'tippy.js';
    import 'tippy.js/dist/backdrop.css';
    import 'tippy.js/animations/shift-away.css';
    
    tippy(targets, {
      animateFill: true,
      plugins: [animateFill]
    });

### [#](https://tippyjs.bootcss.com/animations/#css-animations)
CSS animations

Maybe plain transitions aren't enough for your use case. You can also use CSS animations (e.g. `animate.css`):

    tippy('button', {
      onMount(instance) {
        const {tooltip} = instance.popperChildren;
        requestAnimationFrame(() => {
          tooltip.classList.add('animated');
          tooltip.classList.add('wobble');
        });
      },
      onHidden(instance) {
        const {tooltip} = instance.popperChildren;
        tooltip.classList.remove('animated');
        tooltip.classList.remove('wobble');
      }
    });

You can also use `@keyframes` and add the `animation` property to your animation selector too.

### [#](https://tippyjs.bootcss.com/animations/#dimensions-transition)
Dimensions transition

While a tippy is showing, the content inside of it may change. How do you smoothly transition its dimensions? By default, it instantly changes size when the content is updated. It turns out this is quite complex to do, but possible.

#### [#](https://tippyjs.bootcss.com/animations/#partially-dynamic)
Partially dynamic

View the [CodePen demo](https://codepen.io/atomiks/pen/LgjMbW)
.

#### [#](https://tippyjs.bootcss.com/animations/#fully-dynamic)
Fully dynamic

Image transition (click)Text transition (click)

Code for fully dynamic transitions is still being developed and it is highly experimental at this stage. The documentation will be updated once it's ready.

[Themes](https://tippyjs.bootcss.com/themes/)
[Tippy Instance](https://tippyjs.bootcss.com/tippy-instance/)

---

# Addons | Tippy.js

[Skip to content](https://tippyjs.bootcss.com/addons/#reach-skip-nav)

Addons
------

Addons are external functions that control or create many different Tippy instances, and can be tree-shaken away by bundlers.

### [#](https://tippyjs.bootcss.com/addons/#event-delegation)
Event delegation

Event delegation allows you to let a common parent element handle the creation of tippy instances for child elements.

This allows two things:

*   It prevents the need to create new instances for new child elements appended to the parent.
*   It improves performance as the creation of the tippy instances is deferred until they are triggered for the first time.

#### [#](https://tippyjs.bootcss.com/addons/#usage)
Usage

Your markup should have a structure like this example:

    <div class="parent">
      <button class="child">Text</button>
      <button class="child">Text</button>
      <button class="child">Text</button>
    </div>

Pass a `targets` argument to the `delegate()` addon function (the same type the `tippy()` function can accept) which represents the parent element(s) that should act as a delegate, and a `target` prop representing a CSS selector that should match the child elements which should receive a tippy.

    import {delegate} from 'tippy.js';
    
    delegate('#parent', {
      target: '.child'
    });

In the CDN (`iife`) version, it's available as `tippy.delegate()`

#### [#](https://tippyjs.bootcss.com/addons/#return-type)
Return type

Because `delegate()` can create many different instances, it returns an opaque value depending on the type supplied, just like `tippy()`.

    const delegateInstances = delegate('.parent', {
      target: '.child'
    }); // Instance[]
    
    const delegateInstance = delegate(parentElement, {
      target: '.child'
    }); // Instance

#### [#](https://tippyjs.bootcss.com/addons/#cleanup)
Cleanup

By default, when you destroy a delegate instance, it also destroys any child instances that may have been created by it. If you want to prevent this behavior, pass `false` as an argument:

    const delegateInstance = delegate(parentElement, {
      target: '.child'
    });
    
    // Prevents further creation and destroys any created child tippy instances
    delegateInstance.destroy();
    // Prevents further creation only
    delegateInstance.destroy(false);

#### [#](https://tippyjs.bootcss.com/addons/#polyfill)
Polyfill

This addon uses `Element.prototype.closest()`, which is not supported in older browsers. You will need to polyfill this method to get full support.

* * *

### [#](https://tippyjs.bootcss.com/addons/#singleton)
Singleton

A singleton is a single tippy element that takes the place of an array of regular tippy instances.

This allows two things:

*   Smooth transitions of the tippy between many different reference element targets
*   Elements with tooltips next to each other that have a `delay` can be "grouped" so they appear to share a timeout, which greatly improves UX

See the [demo](https://tippyjs.bootcss.com/#singleton)
 for it in action.

#### [#](https://tippyjs.bootcss.com/addons/#usage-1)
Usage

Pass an **array** of tippy instances to the `createSingleton` addon function, and a `delay` prop:

    import tippy, {createSingleton} from 'tippy.js';
    
    const tippyInstances = tippy('button');
    const singleton = createSingleton(tippyInstances, {delay: 1000});

In the CDN (`iife`) version, it's available as `tippy.createSingleton()`

#### [#](https://tippyjs.bootcss.com/addons/#smooth-transitions)
Smooth transitions

Utilize the `updateDuration` prop, which is the transition duration between position updates of the tippy element:

    const singleton = createSingleton(tippyInstances, {
      delay: 1000,
      updateDuration: 500
    });

> **Note**
> 
> Enabling transitions may cause overflow issues if the tippy content is near the right/bottom edge of a boundary (e.g. window) and the tippy content changes from small to large. This is because of the transition causing the tippy to expand the boundary, making Popper.js think it will fit.

To solve this, constrain the tippy to the viewport:

    createSingleton(instances, {
      boundary: 'viewport'
    });

#### [#](https://tippyjs.bootcss.com/addons/#timing-function)
Timing function

The `transition-timing-function` by default is `easeOutQuint`. Usually this looks nice, but you can change this (to add an inertial slingshot effect for example) like so:

    const singleton = createSingleton(tippyInstances, {
      updateDuration: 500,
      onCreate({popper}) {
        // Any easing function you want.
        popper.style.transitionTimingFunction = 'cubic-bezier(...)';
      }
    });

[Accessibility](https://tippyjs.bootcss.com/accessibility/)
[Plugins](https://tippyjs.bootcss.com/plugins/)

---

# AJAX | Tippy.js

[Skip to content](https://tippyjs.bootcss.com/ajax/#reach-skip-nav)

AJAX
----

Initiating AJAX requests is facilitated by lifecycle hooks. This allows you to do very powerful things. For example, let's say you wanted to show a new image inside a tooltip each time it gets shown:

Hover for a new image

Let's walk through a little tutorial to learn how to do this.

First, let's setup our HTML:

    <button id="ajax-tippy">Hover for a new image</button>

Now, let's add some JavaScript:

    tippy('#ajax-tippy', {
      content: 'Loading...',
      // This prop is recommended if your tooltip changes size while showing
      flipOnUpdate: true
    });

Here's the result so far (nothing happens yet!):

Hover for a new image

To initiate the AJAX request every time the tippy shows, use the `onShow` lifecycle:

    tippy('#ajax-tippy', {
      content: 'Loading...',
      flipOnUpdate: true,
      onShow(instance) {
        // Code here is executed every time the tippy shows
      }
    });

Using `fetch`, we can fetch a random image from an Unsplash API:

    tippy('#ajax-tippy', {
      // ...
      onShow(instance) {
        fetch('https://unsplash.it/200/?random')
          .then(response => response.blob())
          .then(blob => {
            // Convert the blob into a URL
            const url = URL.createObjectURL(blob);
            // Create an image
            const image = new Image();
            image.width = 200;
            image.height = 200;
            image.style.display = 'block';
            image.src = url;
            // Update the tippy content with the image
            instance.setContent(image);
          })
          .catch(error => {
            // Fallback if the network request failed
            instance.setContent(`Request failed. ${error}`);
          });
      }
    });

There are currently two problems with this:

*   When the tippy is hidden, it doesn't reset back to `Loading...`
*   If you quickly hover in and out of the tippy, it initiates many different requests and each image rapidly replaces the old one as each request finishes

The first one can be solved by using the `onHidden` lifecycle, which is executed once the tippy fully transitions out and is unmounted from the DOM:

    tippy('#ajax-tippy', {
      // ...
      onHidden(instance) {
        instance.setContent('Loading...');
      }
    });

The second one requires some state:

    tippy('#ajax-tippy', {
      // ...
      onCreate(instance) {
        // Setup our own custom state properties
        instance._isFetching = false;
        instance._src = null;
        instance._error = null;
      },
      onShow(instance) {
        if (instance._isFetching || instance._src || instance._error) {
          return;
        }
    
        instance._isFetching = true;
    
        fetch('https://unsplash.it/200/?random')
          .then(response => response.blob())
          .then(blob => {
            const src = URL.createObjectURL(blob);
            instance._src = src;
            // ...
          })
          .catch(error => {
            instance._error = error;
            instance.setContent(`Request failed. ${error}`);
          })
          .finally(() => {
            instance._isFetching = false;
          });
      },
      onHidden(instance) {
        instance.setContent('Loading...');
        // Unset these properties so new network requests can be initiated
        instance._src = null;
        instance._error = null;
      }
    });

Currently, the image instantly replaces the `Loading...` text without any smooth transition. How do we make it so the tooltip smoothly transitions in height?

[See the Animations page for details](https://tippyjs.bootcss.com/animations/#dimensions-transition)
.

[Lifecycle Hooks](https://tippyjs.bootcss.com/lifecycle-hooks/)
[Accessibility](https://tippyjs.bootcss.com/accessibility/)

---

# Methods | Tippy.js

[Skip to content](https://tippyjs.bootcss.com/methods/#reach-skip-nav)

Methods
-------

### [#](https://tippyjs.bootcss.com/methods/#instance-methods)
Instance methods

Methods on instances allow you to control the tippy programmatically. See the [Tippy Instance](https://tippyjs.bootcss.com/tippy-instance/)
 page for details on accessing an instance.

#### [#](https://tippyjs.bootcss.com/methods/#show)
show

Programmatically show the tippy at any time:

    instance.show(); // Default
    instance.show(0); // 0ms transition duration

#### [#](https://tippyjs.bootcss.com/methods/#hide)
hide

Programmatically hide the tippy at any time:

    instance.hide(); // Default
    instance.hide(500); // 500ms transition duration

#### [#](https://tippyjs.bootcss.com/methods/#disable)
disable

Temporarily prevent a tippy from showing or hiding:

    instance.disable();

#### [#](https://tippyjs.bootcss.com/methods/#enable)
enable

Re-enable a tippy:

    instance.enable();

#### [#](https://tippyjs.bootcss.com/methods/#setprops)
setProps

You can update any prop after the instance has been created. Pass an object of new props in:

    instance.setProps({
      arrow: true,
      animation: 'scale'
    });

#### [#](https://tippyjs.bootcss.com/methods/#setcontent)
setContent

Updating the `content` prop has its own method as a shortcut:

    instance.setContent('New content');

#### [#](https://tippyjs.bootcss.com/methods/#destroy)
destroy

To permanently destroy and clean up the instance, use this method:

    instance.destroy();

The `_tippy` property is deleted from the reference element upon destruction.

### [#](https://tippyjs.bootcss.com/methods/#static-methods)
Static methods

Static methods belong to the `tippy` module for global behavior.

#### [#](https://tippyjs.bootcss.com/methods/#setdefaultprops)
setDefaultProps

Set the default props for each new instance:

    tippy.setDefaultProps({
      // Props
    });
    
    // Access the current default props
    tippy.defaultProps;

#### [#](https://tippyjs.bootcss.com/methods/#hideall)
hideAll

Hide all visible tippies on the document:

    import {hideAll} from 'tippy.js';
    
    // Use each tippy's own duration
    hideAll();
    // Hide them all instantly
    hideAll({duration: 0});
    // Hide them all except a particular one
    hideAll({exclude: tippyInstance});
    hideAll({exclude: referenceElement});

In the CDN (`iife`) version, it's available as `tippy.hideAll()`.

[Tippy Instance](https://tippyjs.bootcss.com/tippy-instance/)
[Lifecycle Hooks](https://tippyjs.bootcss.com/lifecycle-hooks/)

---

# Accessibility | Tippy.js

[Skip to content](https://tippyjs.bootcss.com/accessibility/#reach-skip-nav)

Accessibility
-------------

Tooltip and popovers are usually not mouse-only UI elements. If vital functionality or information is contained within them, they should be accessible to keyboard and touch inputs so that users who navigate interfaces without using a mouse are not locked out. This is especially true for people with disabilities such as low vision who rely on screen reader technology to assist them with using an application.

To ensure these users get the best possible experience, Tippy already employs baked-in defaults to ensure accessibility. However, some special consideration should be taken into account when using the library so you can be aware of potential accessibility problems that may arise.

### [#](https://tippyjs.bootcss.com/accessibility/#use-natively-focusable-elements)
Use natively focusable elements

Tooltips should only be applied to natively focusable elements like `<button>` or `<input>`. If you are using a `<div>` or `<span>` element, ensure you add `tabindex="0"` so that it can receive focus.

### [#](https://tippyjs.bootcss.com/accessibility/#mouse-keyboard-and-touch-input)
Mouse, keyboard, and touch input

The default trigger for tooltips is `"mouseenter focus"` This means both a hover via mouse and focus via keyboard navigation will trigger a tooltip. Both of these events also cover touch devices via a tap, with some mobile browsers firing `mouseenter` and others `focus` (or both).

### [#](https://tippyjs.bootcss.com/accessibility/#announcing-tooltip-content)
Announcing tooltip content

Non-interactive tooltips give the reference element an `aria-describedby` attribute once they show:

    <button aria-describedby="tippy-1">Text</button>
    <div id="tippy-1" role="tooltip" class="tippy-popper">
      <!-- inner elements -->
    </div>

This allows screen reader software to announce the tooltip content describing the reference element once it's in focus.

### [#](https://tippyjs.bootcss.com/accessibility/#interactivity)
Interactivity

Tippy uses two techniques to ensure interactive popovers are accessible:

*   `aria-expanded` attribute
*   `appendTo: "parent"`

This means once the reference element has focus, the assistive technology will let the user know it has an expandable popover attached to it.

Once they open it, elements within the tippy can be tabbed to immediately once focus has left the reference element. This relies on there being no more focusable sibling elements after the reference element itself.

Before opening the popover:

    <div id="parent">
      <button aria-expanded="false">Text</button>
    </div>

After opening the popover:

    <div id="parent">
      <button aria-expanded="true">Text</button>
      <div id="tippy-1" role="tooltip" class="tippy-popper">
        <!-- inner elements, with focusable content -->
      </div>
    </div>

You should wrap the reference element in its own parent element (`<div>` or `<span>`) if it's not the only focusable sibling element.

#### [#](https://tippyjs.bootcss.com/accessibility/#clipping-issues)
Clipping issues

Sometimes, this behavior won't work for your app due to clipping issues. In this case, you need to specify a custom `appendTo` element outside of the parent node context and use a focus management solution to handle keyboard navigation. [More details here](https://tippyjs.bootcss.com/faq/#my-tooltip-appears-cut-off-or-is-not-showing-at-all)
.

[AJAX](https://tippyjs.bootcss.com/ajax/)
[Addons](https://tippyjs.bootcss.com/addons/)

---

# Misc | Tippy.js

[Skip to content](https://tippyjs.bootcss.com/misc/#reach-skip-nav)

Misc
----

### [#](https://tippyjs.bootcss.com/misc/#custom-position)
Custom position

Use a Popper ReferenceObject:

    tippy(targets, {
      // popperInstance will be available onCreate
      lazy: false,
      onCreate(instance) {
        instance.popperInstance.reference = {
          clientWidth: 0,
          clientHeight: 0,
          getBoundingClientRect() {
            return {
              // ...
            };
          }
        };
      }
    });

### [#](https://tippyjs.bootcss.com/misc/#scrollable-containers)
Scrollable containers

While scrolling the container, the reference element can leave the boundary view, meaning the tippy will appear to be attached to nothing. You can hide the tippy to prevent it from being seen:

    .tippy-tooltip[data-out-of-boundaries] {
      opacity: 0;
    }

This may not be ideal in all cases. You can include this attribute only on a theme if necessary.

Other cases:

*   If you want the tippy to be clipped by the scrolling container, use the props `appendTo: 'parent'` and `boundary: scrollingContainer`.
*   Consider the prop `flipOnUpdate: true` if you want the tippy to flip to best fit in view while the container is being scrolled.

### [#](https://tippyjs.bootcss.com/misc/#different-trigger-target)
Different trigger target

You may want the tippy to appear at a different location from its trigger (event listeners) target. For example:

Trigger target vs

For this, you can utilize the `triggerTarget` prop:

    const innerOrangeSpanElement = document.querySelector('span');
    const outerDivElement = document.querySelector('div');
    
    tippy(innerOrangeSpanElement, {
      triggerTarget: outerDivElement
    });

### [#](https://tippyjs.bootcss.com/misc/#touch-devices)
Touch devices

Tippy provides first-class support for touch devices. Tooltips can be tricky to get right on touch devices because of the nature of touch input.

#### [#](https://tippyjs.bootcss.com/misc/#buttons)
Buttons

A tooltip on a button is generally used to convey information before the user decides to click on it. On touch devices, this isn't possible because a tap is required to show the tooltip, which will fire a click event.

On iOS, a tap will show the tooltip but click events won't fire until a second tap. This allows the user to see the tooltip before deciding to click the button. On Android, clicking the button will show the tooltip and also fire a click event.

Depending on your use case, one of these will be preferred, so user agent checking may be needed.

If neither behavior is preferred, consider using the `touchHold` prop which allows the user to see the tooltip while pressing and holding the button, but won't fire a click event unless the click appears to be intentional.

##### [#](https://tippyjs.bootcss.com/misc/#setup)
Setup

    const button = document.querySelector('button');
    const isIOS = /iPhone|iPad|iPod/.test(navigator.platform);

##### [#](https://tippyjs.bootcss.com/misc/#a-make-ios-behave-like-android-single-tap-to-click)
A: Make iOS behave like Android (single tap to click)

    button.addEventListener('click', () => {
      // Your logic
    });
    
    tippy(button, {
      onShow() {
        if (isIOS) {
          button.click();
        }
      }
    });

##### [#](https://tippyjs.bootcss.com/misc/#b-make-android-behave-like-ios-double-tap-to-click)
B: Make Android behave like iOS (double tap to click)

Tippy has a useful static property `tippy.currentInput`. This is a mutable object whose properties change depending on the user's current input. Currently, it has a single property called `isTouch`, which is a boolean flag determining if the user is currently using touch input. This is a dynamic value because of hybrid devices which can use a mix of mouse and touch input.

    function emulateIOS(listener) {
      let clicks = 0;
    
      return function() {
        clicks++;
    
        if (clicks === 2 || isIOS || !tippy.currentInput.isTouch) {
          clicks = 0;
          listener.apply(this, arguments);
        }
      };
    }
    
    const instance = tippy(button);
    const onClick = emulateIOS(() => {
      // Your logic
    });
    
    button.addEventListener('click', onClick);

#### [#](https://tippyjs.bootcss.com/misc/#hold-and-long-press)
Hold & long press

    // Will only show the tippy while the user is pressing the screen (not a tap)
    tippy(button, {
      touch: 'hold'
    });
    
    // Will only show the tippy on a "long press" hold
    tippy(button, {
      touch: ['hold', 500] // 500ms delay
    });

[Plugins](https://tippyjs.bootcss.com/plugins/)
[FAQ](https://tippyjs.bootcss.com/faq/)

---

# Motivation | Tippy.js

[Skip to content](https://tippyjs.bootcss.com/motivation/#reach-skip-nav)

Motivation
----------

### [#](https://tippyjs.bootcss.com/motivation/#why-tooltips-and-popovers)
Why tooltips and popovers?

Both are elements positioned near a "reference" element, and are hidden until they are triggered. They help conserve space by hiding secondary information or functionality behind a hover or click. They are positioned outside the normal flow of the document so when they are triggered, they are overlaid on top of the existing UI without disrupting the flow of content.

Tippy.js distinguishes them in the following way:

*   A **tooltip** is an element containing simple text content describing a particular element. It's hidden until the user desires more information from the element, e.g. before deciding to click a button.
*   A **popover** is an interactive HTML tooltip. It can be a dropdown, menu, or any other kind of box that pops out from the normal flow of the document. This type of element contains non-vital functionality and can be hidden behind a click or hover to conserve space.

Both of these are called a "tippy" when using Tippy.js!

### [#](https://tippyjs.bootcss.com/motivation/#tippyjs)
Tippy.js

**Size: 5.5 KB (core)** (including Popper: 12.8 KB)

> **Note**
> 
> (core) means the core JS & CSS. If importing more themes, animations, plugins, or addons, the size will increase.

Tippy is an abstraction over Popper and provides a set of features and defaults that make creating tooltip and popover elements easy.

But, how does Tippy compare to other solutions?

### [#](https://tippyjs.bootcss.com/motivation/#comparison-with-popperjs)
Comparison with Popper.js

**Size: 7.3 KB**

Popper.js is a positioning engine, not a tooltip library. Popper's only goal is to position an absolutely positioned element (the tooltip) near another element (the reference).

Since the element is absolutely positioned, naively centering it above the reference element can cause it to:

*   **Overflow the boundary** (viewport, window, scrollParent) and therefore get cut off
*   **Overlap its reference element (due to overflow prevention)**, so it should flip to the opposite side
*   **Detach from the reference element** if inside a scrolling container

Popper solves all of these problems. The expected logic to do this is very complex, so this is effectively a "baseline" library if you want to even use popper elements (tooltips, popovers, dropdowns) in your app in the first place without them having poor UX.

If you want to build the appearance and behavior of your popper elements from scratch, this is a fantastic library. If you want "out of the box" (abstracted) behavior, then using Tippy might be better.

Tippy takes advantage of Popper as a dependency, so you can use them together without incurring additional cost:

    import Popper from 'popper.js';
    import tippy from 'tippy.js';

If you're using the CDN, the `Popper` constructor will already be available.

### [#](https://tippyjs.bootcss.com/motivation/#comparison-with-css-tooltip-libraries-like-microtip-or-ballooncss)
Comparison with CSS tooltip libraries like Microtip or Balloon.css

**Size: 1 KB**

CSS tooltips can be tiny in size, but come with some drawbacks:

*   Lack of positioning engine means overflow prevention & flipping are not possible
*   Interactivity can be complicated or inaccessible
*   Using HTML content within them is cumbersome (especially with UI libraries like React), with limited dynamism for updating content or reacting to state
*   No dynamic arrow positioning or features like `followCursor`

### [#](https://tippyjs.bootcss.com/motivation/#comparison-with-tooltipster)
Comparison with Tooltipster

**Size: 10 KB** (including jQuery: 40 KB)

Tooltipster is a fantastic library with very similar functionality, but requires a jQuery dependency, unlike Tippy. To many people these days, this is a deal-breaker! jQuery's minzipped size is about 30 KB, and Tooltipster including CSS is about 10 KB. To people using frameworks like React, Vue, or Angular, it can be hard to deal with such a large dependency.

[FAQ](https://tippyjs.bootcss.com/faq/)

---

# Plugins | Tippy.js

[Skip to content](https://tippyjs.bootcss.com/plugins/#reach-skip-nav)

Plugins
-------

Plugins are an extensible way to add functionality to tippy instances. By splitting functionality into a plugin, components or routes that don't need the plugin are not burdened with its bundle size cost.

### [#](https://tippyjs.bootcss.com/plugins/#exported-plugins)
Exported plugins

These plugins are exported by the package:

*   `animateFill` 🖌️
*   `followCursor`
*   `inlinePositioning`
*   `sticky`

🖌️ Requires importing the following CSS stylesheets to work:

    import 'tippy.js/dist/backdrop.css';
    import 'tippy.js/animations/shift-away.css';

### [#](https://tippyjs.bootcss.com/plugins/#usage-1)
Usage

#### [#](https://tippyjs.bootcss.com/plugins/#cdn-iife)
CDN (iife)

Included plugins (part of the [All Props](https://tippyjs.bootcss.com/all-props/)
 table) will work as normal.

    tippy(targets, {
      followCursor: true
    });

#### [#](https://tippyjs.bootcss.com/plugins/#node-esm-or-cjs)
Node (esm or cjs)

    import tippy, {followCursor} from 'tippy.js';
    
    tippy(targets, {
      followCursor: true,
      plugins: [followCursor]
    });

### [#](https://tippyjs.bootcss.com/plugins/#creating-your-own-custom-plugin)
Creating your own custom plugin

A plugin is created by defining an object with the following shape:

    const plugin = {
      // Optional (if the plugin provides a prop to use)
      name: 'propName', // e.g. 'followCursor' or 'sticky'
      defaultValue: 'anyValue',
    
      // Required
      fn(instance) {
        // Internal state
        return {
          // Lifecycle hooks
        };
      }
    };

The plugin's function `fn` returns an object of [lifecycle hooks](https://tippyjs.bootcss.com/lifecycle-hooks/)
.

Here's an example of a plugin that causes a popper to hide if no elements within it are in focus (for interactivity):

    const hideOnPopperBlur = {
      name: 'hideOnPopperBlur',
      defaultValue: true,
      fn(instance) {
        return {
          onCreate() {
            instance.popper.addEventListener('focusout', event => {
              if (
                instance.props.hideOnPopperBlur &&
                event.relatedTarget &&
                !instance.popper.contains(event.relatedTarget)
              ) {
                instance.hide();
              }
            });
          }
        };
      }
    };
    
    // Our new prop is enabled by default (defaultValue: true)
    tippy(targets, {
      plugins: [hideOnPopperBlur]
    });

Plugins are invoked per-instance and the plugin function definition takes the instance as an argument, so you can use private variables to create internal state in the plugin closure. This is how the `followCursor` plugin works.

### [#](https://tippyjs.bootcss.com/plugins/#typescript)
TypeScript

Types that take `Props` (e.g. `Tippy`, `Delegate`, `CreateSingleton`) are generics that accept an extended props interface:

    import tippy, {Tippy, Props, Plugin, LifecycleHooks} from 'tippy.js';
    
    interface CustomProps {
      myCustomProp: boolean;
    }
    
    type FilteredProps = CustomProps &
      Omit<Props, keyof CustomProps | keyof LifecycleHooks>;
    
    type ExtendedProps = FilteredProps & LifecycleHooks<FilteredProps>;
    
    export const myCustomProp: Plugin<ExtendedProps> = {
      name: 'myCustomProp',
      defaultValue: false,
      fn: () => ({})
    };
    
    export default (tippy as unknown) as Tippy<ExtendedProps>;

[Addons](https://tippyjs.bootcss.com/addons/)
[Misc](https://tippyjs.bootcss.com/misc/)

---

# FAQ | Tippy.js

[Skip to content](https://tippyjs.bootcss.com/faq/#reach-skip-nav)

FAQ
---

### [#](https://tippyjs.bootcss.com/faq/#what-syntax-theme-is-used-on-this-website)
What syntax theme is used on this website?

It's a theme I made called [Moonlight](https://github.com/atomiks/moonlight-vscode-theme)
!

### [#](https://tippyjs.bootcss.com/faq/#nothing-is-working)
Nothing is working

Make sure Tippy's scripts are placed _before_ your own scripts, at the very bottom of the page, like so:

    <!DOCTYPE html>
    <html>
      <head>
        <title>My page</title>
      </head>
      <body>
        <button>Text</button>
    
        <!-- Very end of the body -->
        <script src="https://unpkg.com/popper.js@1"></script>
        <script src="https://unpkg.com/tippy.js@5"></script>
        <script>
          tippy('button', {content: 'tooltip'});
        </script>
      </body>
    </html>

### [#](https://tippyjs.bootcss.com/faq/#my-tooltip-appears-cut-off-or-is-not-showing-at-all)
My tooltip appears cut off or is not showing at all

When using `interactive: true`, the tippy may be invisible or appear cut off if your reference element is in a container with:

*   `position` (e.g. fixed, absolute, sticky)
*   `overflow: hidden`

To fix add the following prop (recommended):

    tippy(targets, {
      // ...
      popperOptions: {
        positionFixed: true
      }
    });

Or, if the above causes issues:

    tippy(targets, {
      // ...
      appendTo: document.body
    });

⚠️ For the latter, you need to be employing focus management for accessibility.

### [#](https://tippyjs.bootcss.com/faq/#im-getting-uncaught-referenceerror-process-is-not-defined)
I'm getting Uncaught ReferenceError: process is not defined

If you're using the ESM or CJS versions and importing like this:

    import tippy from 'tippy.js';
    // or
    const tippy = require('tippy.js').default;

Tippy uses a special expression to distinguish a development and production environment. For you, the developer, there are lots of warnings and error messages to help your development experience. For your end users, all of this needs to get stripped out because it reduces performance and increases bundle size.

Tools like `create-react-app` and `Parcel` bundler handle this automatically.

#### [#](https://tippyjs.bootcss.com/faq/#browserify/grunt/gulp)
Browserify/Grunt/Gulp

[View the following link](https://vuejs.org/v2/guide/deployment.html#With-Build-Tools)
.

#### [#](https://tippyjs.bootcss.com/faq/#rollup)
Rollup

Install the [`replace plugin`](https://www.npmjs.com/package/rollup-plugin-replace)
.

    import replace from 'rollup-plugin-replace';
    
    export default {
      // ...
      plugins: [\
        // Production config\
        replace({\
          'process.env.NODE_ENV': JSON.stringify('production')\
        }),\
        // OR development config\
        replace({\
          'process.env.NODE_ENV': JSON.stringify('development')\
        })\
        // You can also use process.env.NODE_ENV and set the env variables when\
        // running the rollup command to merge the above into one call\
      ]
    };

### [#](https://tippyjs.bootcss.com/faq/#how-do-i-use-the-animations-or-themes-stylesheets-with-the-cdn)
How do I use the animations or themes stylesheets with the CDN?

For brevity, this documentation uses `import` syntax and assumes a module bundler environment. If you're using the CDN version, then you'll be using `<link>` tags to import separate CSS stylesheets.

[See the example here](https://tippyjs.bootcss.com/getting-started/#node-vs-browser)
.

### [#](https://tippyjs.bootcss.com/faq/#what-are-those-iife-esm-and-cjs-initialisms)
What are those "iife", "esm" and "cjs" initialisms?

They represent JavaScript formats. You don't need to know how they work, just which one you're using:

| Initialism | Full Name | Usage | Tree-Shaking? |
| --- | --- | --- | --- |
| `iife` | Immediately Invoked Function Expression | Used via script tags in the browser (CDN) | No  |
| `esm` | ECMAScript Module | Used via `import` syntax in module bundlers | Yes |
| `cjs` | CommonJS Module | Used via `require()` syntax in module bundlers | Only in `Parcel` currently |

Using `tippy.js` via the `esm` format is the most recommended way, since you get the benefits of tree-shaking in all bundlers.

### [#](https://tippyjs.bootcss.com/faq/#what-global-side-effects-are-there)
What global side effects are there?

Tippy has some environment side effects to make it work better across different devices.

#### [#](https://tippyjs.bootcss.com/faq/#ioss-inability-to-employ-click-outside-behavior)
iOS's inability to employ "click outside" behavior

Tippy adds this class to the `<body>` for iOS when there are any instances showing:

    .tippy-iOS {
      cursor: pointer !important;
      -webkit-tap-highlight-color: transparent;
    }

This allows tooltips to hide when the user taps off a reference element. This has a side effect of allowing `mouse` related events to fire on "unclickable" elements on iOS, which is normally not possible. Android browsers on the other hand allow this, so it effectively makes iOS & Android browsers behave the same.

#### [#](https://tippyjs.bootcss.com/faq/#document-and-window-listeners)
Document and window listeners

There are global listeners to determine the user's current input type (e.g. `touch`), and other UX helpers.

### [#](https://tippyjs.bootcss.com/faq/#i-cant-click-things-inside-the-tooltip)
I can't click things inside the tooltip

To enable interactivity, set the `interactive` prop to `true`.

### [#](https://tippyjs.bootcss.com/faq/#my-tooltip-is-hiding-instantly-after-showing)
My tooltip is hiding instantly after showing

If you're using a `focus` trigger, for example on an `<input>`, make sure you also set `hideOnClick: false`.

### [#](https://tippyjs.bootcss.com/faq/#changing-data-tippy-attributes-does-not-update-the-tooltip)
Changing data-tippy-\* attributes does not update the tooltip

Updating the data-tippy-\* attribute on an element will currently not update the tooltip. You must use the [`setProps()` method](https://tippyjs.bootcss.com/methods/#setprops)
 on a Tippy instance.

For example, let's say you want to update the `theme` for tooltips when changing between dark and light mode:

    const instance = tippy(element, {theme: 'custom-dark'});
    
    // When clicking the theme toggle button, you can do this:
    instance.setProps({theme: 'custom-light'});

It's also possible to attach a `MutationObserver` to the reference elements and observe mutations to attributes if need be, then call `.setProps()` with the new values.

### [#](https://tippyjs.bootcss.com/faq/#can-i-use-the-[object-object]-attribute)
Can I use the `title` attribute?

Yes. The `content` prop can be a function that receives the reference element as an argument and returns a string or element.

    tippy('button', {
      content(reference) {
        const title = reference.getAttribute('title');
        reference.removeAttribute('title');
        return title;
      }
    });

The `title` attribute should be removed once you have its content so the browser's default tooltip isn't displayed along with the tippy.

#### [#](https://tippyjs.bootcss.com/faq/#plugin)
Plugin

You can create a plugin for this to generalize the behavior:

    const titleAttribute = {
      name: 'titleAttribute',
      defaultValue: true,
      fn() {
        return {
          onCreate(instance) {
            if (!instance.props.titleAttribute) {
              return;
            }
    
            const title = instance.reference.getAttribute('title');
    
            if (title) {
              instance.setContent(title);
              instance.reference.removeAttribute('title');
            }
          }
        };
      }
    };

Note that the plugin does not take into account dynamic titles. Be cautious of why you might need this in the first place.

### [#](https://tippyjs.bootcss.com/faq/#whats-the-difference-between-an-addon-and-a-plugin)
What's the difference between an addon and a plugin?

An **addon** is an external function that calls the `tippy()` constructor because it's controlling or creating many different tippy instances.

A **plugin** is a plain object that hooks into, and adds functionality, to a single tippy instance that has already already created.

[Misc](https://tippyjs.bootcss.com/misc/)
[Motivation](https://tippyjs.bootcss.com/motivation/)

---