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 :

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.

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.