---
title: Constructor
path: /v6/constructor/
index: 2
---

The `tippy()` constructor (a plain function) creates individual tippy instances.
To give the tippy content you have two options:

### Attribute

With some elements on the document:

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

Call the `tippy()` constructor with a CSS selector matching them:

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

### Prop

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

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

> **Note**
>
> Tippy will create tooltips for elements even if you forget to give them
> content, resulting in an odd small shaped tooltip. Ensure your CSS selector is
> specific enough to guarantee their content.

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

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