Tooltip on mouse over

Step 2 - Template >

Tooltip on mouse over

Previous pageReturn to chapter overviewNext page

The commands in this window are used to define the style of the Tooltips that are associated with links that are added to text and images with the Inserisci collegamento Link command. A Tooltip is a short text that appears in a balloon when the mouse passes over a link: it should explain what will happen when the link is clicked.


You can start defining Tooltips with the options in the Effect section:

Tooltip Position: choose whether you want the Tooltips to be displayed on the Left, Right, Top or Bottom of the link.
Effect: you can specify an entry effect for the Tooltips.

The options in the Style section are:

Background Color: you can choose the color for the Tooltips' background.
<%S2_STYLES_IMTTIPSHAPE%>: you can choose the Tooltip’s shape. Each shape has a number of options associated with it, so the options for your choice may be:
Thickness: the thickness of the borders (each one may be defined separately).
Color: the color of the borders (again, each border can be colored separately).
Rounded corners: how rounded the corners are (each one can be defined separately).
Shadow: a shadow, specifying its color, position, diffusion and size.
Show Tail: you can add an arrow to the balloon that points towards the link that the Tooltips refer to.

The options for the Text are:

Text Color: you can choose a color for the text of the Tooltips.
Font Type: specifies the font, style and size to use for the text. The menu shows the command for applying the Default Font (defined by the style of the Page Text item in the Text Style window), the list of safe fonts (those which are present on all devices and do not need to be published, and all the Google fonts and web fonts added in the Add web fonts window, which is opened by the Other font types command.
Alignment: this indicates how the text is to aligned in the Tooltip: to the Left, in the Center, or to the Right.

The style settings are valid for the entire project, and so all the Tooltips will look the same. The contents of each Tooltip (text and images) are defined in the Link | Tooltip window.