Customizing Tooltips
As seen in the demo, the tippy() function takes an object of options as a
second argument to customize the tooltips:
tippy('button', {
animation: 'scale',
duration: 0,
arrow: true,
delay: [1000, 200],
})You can also specify options on the element using data attributes:
<button
data-tippy-animation="scale"
data-tippy-duration="0"
data-tippy-arrow="true"
data-tippy-delay="[800, 200]"
>
Text
</button>Note that only JSON values are valid in attributes.
It can be useful to use the function for "global" settings and choose attributes for individual settings 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 settings for all <button>s
tippy('button', {
content: 'global content',
animation: 'fade',
})Default options
Often you don't want to specify options over and over again when initializing
tooltips. You can set the default options for every tooltip with the
tippy.setDefaults() method:
tippy.setDefaults({
animation: 'fade',
arrow: true,
})You can place this call directly after the scripts to set the defaults for auto-initialized tooltips:
<!-- script links here -->
<script>
tippy.setDefaults({
// Your options here
})
</script>