Displaying tool tips on images and buttons

This article explains how you can enable – and customize – tool tips to appear on images and buttons.

Infradox XS uses the tooltipster JQuery library to display tool tips when you hover over an element on your page. You can configure on what type of elements (e.g. thumbnails, buttons or other html elements that have a title attribute), and you can configure a theme. If you want more control, you can add the xstooltip object to your custom Javascript file in the code editor and you can also change the CSS.

Recommended reading

Infradox XS customisation
Using the code editor
Using custom CSS
Using Javascript in your pages

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:

.tooltipster-sidetip.tooltipster-[theme].tooltipster-[theme]-customized .tooltipster-box {
...your css here...
}
.tooltipster-sidetip.tooltipster-[theme].tooltipster-[theme]-customized .tooltipster-content {
...your css here...
}

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.
E.g. change
.tooltipster-sidetip.tooltipster-[theme].tooltipster-[theme]-customized .tooltipster-box
to
.tooltipster-sidetip.tooltipster-noir.tooltipster-noir-customized .tooltipster-box
if you have selected the noir theme.

Customizing your tool tips

The behavior and style can be completely customized by overriding the default function. To do this, add the xstooltips object to the Javascript file in the code editor. For example:

var xstooltips = {
    init: function() {
        $(".thmbimg,.buttons a,.navbar *").tooltipster();
    }
}

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.

var xstooltips = {
    init: function() {
        $(".thmbimg,.buttons a,.navbar *").tooltipster({
            animation: "grow", 
            delay: 200,
            distance:3, 
            maxWidth:300,
            side:"top"
        });
    }
}

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/