Tooltip

Adding some tooltips on your website could be useful add explanations on anything like text, buttons...

Creating a tooltip with no content will not be displayed.
Hover this next example to see the tooltip appear :

Set the tooltip position using the position option.

Set the tooltip style using the classes option.

You may have to change a tooltip appearance.
You can change it using our change() method.

Javascript initialization

Once HTML was setup, you can activate the tooltip with this simple code.
Just pass the id of your tooltip that you want to activate.

To know all the ways to initialize a JS component, please read the JS Init page.

Property	Default value	Description
content	''	This is the content of your tooltip.
animationDelay	0	Opening and closing animation delay in ms.
animationDuration	200	Opening and closing animation duration in ms.
offset	'10px'	Offset between the tooltip and the element.
classes	'grey dark-4 light-shadow-2 p-2'	Classes to add style on your tooltip.
position	'top'	Tooltip position depending on your element. Accepted values are `'top'`, `'right'`, `'bottom'` or `'left'`.

Method	Description
.show()	Show the tooltip.
.hide()	Hide the tooltip.
.change()	Change the tooltip. You send an object with the options you want to change and their new values.
.updatePosition()	Update the position of the tooltip. Useful when you move dynamically an element which contains a tooltip.

Event	Description
ax.tooltip.setup	Event sent when the tooltip has been setup.
ax.tooltip.show	Event sent when the tooltip is shown.
ax.tooltip.hide	Event sent when the tooltip is hidden.

CSS Variable	Default value	Description
`--ax-tooltip-z-index`	999	Tooltip z-index.