EverWeb Widgets

Tooltipster Tooltips

This widget uses an <abbr> element inserted into text in EW to create an animated tooltip containing the contents of the title element.
NOTE: The tooltip can only be inserted in the text field of a widget - NOT in a default text box!
The tooltip is created using the ToolTipster JQ plugin.
TT has a function to create a tooltip either on hover or on click.

tooltip widget code

Widget

Drag the widget onto the page.
Check the "Allow free dragging" box in the Metrics inspector and drag it to the LEFT of the design canvas out of the way of any content.
Anytime the code for the tooltip is required, select the Code Tooltip Plugin widget, edit the text in the Tooltip Code box and copy the code to the clipboard. Select the widget where the code is going to go and paste it into the text box.
The code is shown below.

Code …

<abbr> class="tooltip" title="Tooltip Text">Visible Text</abbr>

Enter the text that will appear in the tooltip to replace the text marked in blue
Enter the visible text to replace the text marked in red.
Once all the tooltips are in place and the page is ready to be published, check the box in the Widget Settings to hide the plugin.

tooltip widget code

Widget Settings

The CSS for the animated tooltip is quite complex so the styles are not user adjustable. The background is mid grey so it should work with both light and dark page backgrounds.
Tooltip
The tooltip font family and font size can be adjusted. It can use either a web safe font or a non websafe or Google hosted font with a web safe fallback font.
Visible Text
The visible text in the <abbr> inherits the paragraph font family.
The <abbr> can be style for font color and background color. There is a slider to adjust the background opacity to add transparency to it.
The text decoration control has options for "none", "underline", and "line through".
There are controls for adding top/bottom and left/right padding. Adding a little padding makes the item look better. When the page will be viewed on a touch device like an iPad or iPhone, the top/bottom padding control can be used to increase the height to the minimum recommended 28px for UI controls on these devices.
Cursor
The cursor shown when the visitor hovers the abbr element when using a computer can be set. The options are "default", "pointer", "help" and "none". The default cursor is normally the little black arrow.
Touch Tooltip
When the page is viewed on a touch device like an iPad or iPhone, an alternative javascript is loaded so that the tooltip works using a tap to open/close it.
Open this page on a touch device or with the iOS Simulator to see how this works and how this page layout responds to changes in browser/device screen width.

© EverWeb Widgets -