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 :

Tooltip position

Set the tooltip position using the position option.

Tooltip style

Set the tooltip style using the classes option.

Change tooltip

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