EverWeb Widgets HTML5

Text To Text Animated Tooltip

EZ text to text tooltip

Hover or Click Tooltip

This widget creates an animated text tooltip which appears when a text link is moused over on computers or clicked on mobile devices.
The tooltip automatically positions itself in relation to the image depending on where it is on the web page. This avoids the complication of adding positioning info.
Try the tooltip on this page with the browser window wideer than the page and then narrow it down to the page content width to see how it adjusts itself.
If the tooltip has no room to move up it will move down and vice versa.
There are five built in animation types and the animation delay can be adjusted.

This tooltip is animated and works on hover with computers and will open/close on click when viewed on mobile devices.

Widget Settings

Animate text to textTooltip
Text to Text Tooltip

Widget Settings

Enter the pre link text, link text and any post link text.
Set the font family, size, color and link color.
Enter the tooltip text. Note that this text is entered as HTML so line breaks can be created using <br>.
Enter the required tooltip width.
Set the tooltip border width, corner radius and color.
Set the tooltip background color.
Enter the tooltip text font size and choose the color and text align.
Select an animation type and set its delay in tenths of a second.

Get The Widget

IMPORTANT

The text in the tooltip is entered into a javascript.
It is essential to NOT use an apostrophe in this text or the widget will break.