EverWeb Widgetbox

Text Tooltips

Text and Image Info Tooltips

Tooltips

Text tooltip info button
Image tooltip info button

These widgets create tooltips which appear from an info or map icon on mouseover. The tooltips can be set to appear in four different positions in relation to the icon - top left, top right, bottom left and bottom right.

When the web page is viewed on a mobile device such as an iPad, hover doesn't work of course. In this case the tooltip will appear when the icon is tapped. The tooltip disappears with a tap on any part of the screen outside of the tooltip.

These tooltips are useful for squeezing extra info into a page. They can also be used in the footer to add business location and contact info on every page of the site without taking up too much room.

The widget controls are straightforward...

Choose the button to suit the page theme.

Enter the tooltip text using the HTML for a line break <br />

Use two of the above to create a paragraph break.

Select the font family from the list if web safe fonts and choose its size and color.

Set a suitable width for the tooltip. This width will depend on the amount of text and the position of the icon on the page. The tooltip height will adjust automatically as text is added.

Choose the position of the tooltip in relation to the icon making sure that it doesn't wander outside of the page content area!

Set the tooltip border width and color.

The tooltip background color can be altered to complement the text color so the tooltip can be as subtle or garish as desired.

If the page with the tooltip(s) is in a directory, check the box.

Finally, before the page is previewed or published, make sure any tooltip widgets are selected and brought to the front using the EverWeb Arrange drop down menu.

This tooltip is for an image. The Choose button opens the Assets List to select an image.

Set the required image/tooltip width. The height will adjust automatically.

Set the position of the tooltip in relation to the icon.

Choose the required border width and color. If no border is required, set the slider to zero.

Select a background color and check the box if the page is contained in a directory.

Use the Arrange menu to bring the widget to the front before previewing or publishing the page so that the tooltip will be in a layer above the surrounding objects.

{!-ramimAltText-!}Info
Get The Widget
Enter the tooltip text and create line breaks using the HTML tag.
This is a line break.
Use two of these to create a paragraph break.

This is a new paragraph...
Info
Enter the tooltip text and create line breaks using the HTML tag.
This is a line break.
Use two of these to create a paragraph break.

This is a new paragraph...
Info

Image Tooltips