Tooltip is a toggle plugin to show simple content relative to an element node and positioned relative to it.


You can customize the default styles of this component inside tailwind.config.js setting theme.extend.xtendui.tooltip see css customization. Check xtendui/src/tooltip.css.js for default styles.


Import the javascript file with import 'xtendui/src/tooltip'.

Initialize automatically within markup with [data-xt-tooltip="{ <options> }"].

Initialize manually within javascript with new Xt.Tooltip(document.querySelector('.my-container'), {/* options */}).

Usage Unique

Use this code to create a tooltip in unique mode.

The unique mode is useful when you want to trigger targets outside the scope.

Only when you specify elements or targets with id the query is inside document not only inside object.

Usage Multiple

Use this code to create tooltip in multiple mode.


Check out tooltip themes for advanced implementations.