EverWeb Codebox

Image Tooltip

Browser Default Tooltip

A tooltip is an info box that pops up when the cursor is hovered over a hyperlink or an image. The text that appears in the box is whatever is entered into the title attribute in the HTML for the link or image...

<img src=".. path to the ../image.jpg" title="Tooltip Text" style="width:100px;height:75px;margin:0;padding:0;border:none" />

Image with Tooltip...

Code

Image with Styled Tooltip

Images that show a tooltip on hover are a good way to provide extra info for both human vistors and the search engine spiders. The example at the top right of this page doesn't look too good and can be difficult to read - especially for those with impaired vision.

The tooltip for the image shown to the right appears inside the image on mouseover.

The tooltip and its text content can be styled any which way using CSS as shown below.

Superman

<a href="#" class="image-tooltip" data-tooltip="Tooltip Text">

<img src="{!-ASSETSPATH-!}Images/image.jpg" style="width:320px;height:240px;border:none;margin:o;padding:0" alt="Alt Text" />

</a>

<style type="text/css">  

a.image-tooltip[data-tooltip]:link {

     position: relative;

     text-decoration: none;

     font: 15px helvetica; /* Font size and family */

     color: #FFF; /* Font color */

     text-align:center}

a.image-tooltip[data-tooltip]:before {

     content: attr(data-tooltip);

     position: absolute;

     bottom:0px; /* Tooltip position y-axis */

     left: 0px; /* Tooltip position x-axis */

     background: #000000; /* Tooltip background color */

     padding: 5px 0;

     visibility: hidden;

     width:320px} /* Tooltip width */

a.image-tooltip[data-tooltip]:hover:before {

     visibility: visible}

</style>

This tooltip consists of an <img> contained inside a hyperlink.

The tooltip text is entered using the HTML5 data attribute which is a more up to date method than using a span or paragraph tag.

The HTML is shown above.

The link has a class - image-tooltip - and the Tooltip Text is entered where shown.

Enter the file path to the image, its width and height and some Alt Text.

The styles are shown to the right and are commented for easy customization.

Pseudo classes are used to pull the CSS together and get everything working.

In this example, the tooltip is the full width of the image and is positioned at the bottom left.

Experiment with different values for width and position.

The background can have opacity by replacing...

background: #000000;

... with...

background: rgba(0,0,0, 0.6);

Change the value marked in magenta to alter the opacity.

HTML

Click HERE for info about two widgets for creating mouseover image captions and tooltips with hyperlinks if required.