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 :
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.
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
| CSS Variable | Default value | Description |
|---|---|---|
--ax-tooltip-z-index
|
999 | Tooltip z-index. |
