Skip to content
You're viewing the previous major version's docs. Click here to view the latest version.
Tippy Logo

Tippy.js

View on GitHub
v6.3.7

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', });

#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});
Customizing TooltipsHTML Content

© 2022 — MIT License

Icons made by Freepik from www.flaticon.com