Customization
The tippy()
function takes an object of optional props (configuration
properties) 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});