This article explains how you can enable – and customize – tool tips to appear on images and buttons.
Infradox XS customisation
Using the code editor
Using custom CSS
How to enable the tooltipster library
Go to Site configuration and click on Website Style in the sidebar. Scroll to the bottom and open the tooltips section. Select the elements that you want to use to display tool tips (i.e. thumbnails, thumbnail buttons, toolbar items). Note that if you want your tool tips to (also) display on other elements, this is explained further down in this article.
In the Theme drop down box select one of the available themes.
Click Save at the bottom.
The client facing pages will now load the CSS and Script libraries required for this function and a tool tip will display when you hover over any of the configured elements.
Changing the look and feel
You can change the look and feel of the tool tips by changing the theme as described above. You can also change the look and feel by changing the following CSS classes in the code editor:
Note that you’ll need to replace [theme] with the name (in lower case) of the theme that you have configured in the Website style settings.
if you have selected the noir theme.
Customizing your tool tips
The above example enables tool tips on all elements with the class name .thmbimg, .buttons a and on all elements in the pagination toolbars with .navbar *. You can add or remove classes to suit your needs.
The tooltipster function can also be called with a JSON formatted object with parameters to further customize the tooltips (below). Note that if you include the theme parameter, then its value must match the theme that you have configured in the Website style settings in Site configuration.
In the above example,
- the animation parameter is used to change how the tool tips appear, you can choose from fade, grow, swing, slide and fall,
- the delay parameter is used to specify how long to wait before the tool tip will display,
- the distance parameter lets you specify the number of pixels between the tool tip and the element that is appears for,
- the maxWidth parameter lets you set the maximum width of the tool tip. This is useful if your thumbnails have e.g. captions or long texts in the title attribute,
- and the side parameter lets you specify where the tool tip is to appear (top, bottom, left or right).
The above example shows only a few of the parameters that are available. For all options please read http://iamceege.github.io/tooltipster/