---
title: Customizing Tooltips
path: /v5/customizing-tooltips/
index: 3
---

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

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

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

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

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

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

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

```js
tippy.setDefaultProps({delay: 50});
```