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 these next examples to see the tooltips appear :

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.

Options

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'`.

Methods

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.

Events

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.

Styling