---
title: Creating Tooltips
path: /v5/creating-tooltips/
index: 2
---

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

```html
<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:

```js
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:

```js
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.

### 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:

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

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

```js
// 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'));
```

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

<!-- prettier-ignore -->
```html
<!-- 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.

### 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:

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