Document

Tooltips display informative text when users hover over, focus on, or tap an element.

Wrap the content in extra set of quotes

When using the x-tooltip directive, make sure to wrap the content in an extra set of quotes. This is required because the directive uses the eval() function to evaluate the content and therefor is handeled as javascript.

1<x-button x-tooltip="'This is a tooltip'">Hover me</x-button>

Colors

You can change the color of the tooltip by using one of the available color modifiers.

1<x-button x-tooltip="'Dark'" type="black">Default</x-button>
2<x-button x-tooltip.primary="'Primary'" type="primary">Primary</x-button>
3<x-button x-tooltip.warning="'Warning'" type="warning">Warning</x-button>
4<x-button x-tooltip.danger="'Danger'" type="danger">Danger</x-button>
5<x-button x-tooltip.success="'Success'" type="success">Success</x-button>
6<x-button x-tooltip.white="'White'" type="white">White</x-button>

Sizes

You can change the size of the tooltip by using one of the available size modifiers: lg or xl.

1<x-button x-tooltip="'This is perfect for 1 line'">Default</x-button>
2<x-button x-tooltip.lg="'This is the default tooltip with more space. Very usefull for more than 1 line.'">Large</x-button>
3<x-button x-tooltip.xl.html="'<h4>Extra Large</h4><p>This is the extra large tooltip with plenty of space. You can easily add HTML inside.</p>'">Extra Large</x-button>

Position

You can change the position of the tooltip by using one of the available position modifiers.

1<x-button x-tooltip.left="'Left'">Left</x-button>
2<x-button x-tooltip.top="'Top'">Top</x-button> <!-- default -->
3<x-button x-tooltip.bottom="'Bottom'">Bottom</x-button>
4<x-button x-tooltip.right="'Right'">Right</x-button>

Offset

You can change the offset of the tooltip by using the offset-<value> modifier.

1<x-button x-tooltip.offset-0="'0px Offset'">Offset 0</x-button>
2<x-button x-tooltip.offset-10="'10px Offset'">Offset 10</x-button>
3<x-button x-tooltip.offset-20="'20px Offset'">Offset 20</x-button>
4<x-button x-tooltip.offset-33="'33px Offset'">Offset 33</x-button>

No Arrow

You can remove the arrow from the tooltip by using the noarrow modifier.

1<x-button x-tooltip.noarrow="'No Arrow'">Hidden arrow</x-button>
2<x-button x-tooltip.noarrow.offset-10="'No Arrow'">Hidden arrow offset</x-button>

HTML Content

You can use HTML content in the tooltip by adding the html modifier.

1<x-button x-tooltip.html="'<strong>This</strong> is a <u>tooltip</u>'">Hover me</x-button>

JS Content

You can use JavaScript / AlpineJS variables in the tooltip.

Hover me

1<div x-data="{
2    tooltipContent: 'This is a tooltip',
3}">
4    <div x-tooltip="tooltipContent">Hover me</div>
5</div>

Delay

You can change the delay of the tooltip by using the delay-<value> modifier. This is useful, when you want to add additional help to the user, but don't want to distract him.

1<x-button x-tooltip.delay-0="'0ms delay'">0ms</x-button>
2<x-button x-tooltip.delay-100="'100ms delay'">100ms</x-button>
3<x-button x-tooltip.delay-500="'500ms delay'">500ms</x-button>
4<x-button x-tooltip.delay-1500="'1500ms delay'">1500ms</x-button>