---
title: Customization
path: /v6/customization/
index: 3
---

`tippy()` takes an object of optional props (configuration properties) as a
second argument to customize your tippies:

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

These can also be specified on the element using data attributes:

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

> **Note**
>
> Only JSON is valid in attributes.

### Mixing attributes and props

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});
```