EverWeb Codebox

Text Tooltip

Basic Hyperlink 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...

The HTML for the whole paragraph is this...

<p class="tooltiptext">

This is an example of a text

<a href="#" class="tooltiptext">Tooltip

<span>A tooltip using CSS.</span>

</a>

styled using CSS. Hover the cursor over the link to see the text.

</p>


The text in the paragraph which contains the tooltip is styled using the class "tooltiptext".


The actual hyperlink code looks like this...


<a href="#" class="tooltiptext">Tooltip<span>A tooltip using CSS.</span></a>


Replace the hash sign - marked in magenta - with the URL.


The text marked in blue is the hyperlink text.


The text which appears in the tooltip is marked in red.


This is contained in a span - <span></span>


Tooltip Position

The <span> tag containing the tooltip text is relatively positioned in relation to the link by adjusting the values for "top" and "left" in the CSS.

Note that these positioning values can also be negative.

A negative value for "top" places the tooltip above the link and a positive value places it below.

Decrease/increase the value for "left" to move it left/right.

<style type="text/css">

/* text tooltip */

p.tooltiptext  {   /* paragraph styles */

     font: 15px 'Verdana', Helvetica, sans-serif;

     color: #000;

     margin:0;

     padding:0;

}

a.tooltiptext  {   /* link styles */

     outline:none;

     font: 15px 'Verdana', Helvetica, sans-serif;

     color: #0000FF;

}

a.tooltiptext:hover {   /* link hover styles */

     text-decoration:none;

     color: #FF0000;

}

a.tooltiptext:hover span {   /* tooltip styles */

    display:inline;

    position:absolute;

    border:2px solid #0000FF;  

    color:#EEE;

    background:#444;

}

a.tooltiptext span {   /* tooltip position */

    z-index:100;

    display:none;

    padding:14px 20px;

    position: relative;

    top: -50px;

    left:150px;

}  

/*tooltip border radius*/

a.tooltiptext span

{

    border-radius:10px;

    -moz-border-radius: 10px;

    -webkit-border-radius: 10px;       

}

</style>

HTML

CSS

Paste the styles into the page Head Code box and the HTML into a snippet. Click the "Apply" button and then adjust the snippet size by grabbing a drag handle or using the Metrics inspector.

Tooltips can also be applied to images. Go to THIS PAGE for more info.

This is a Hyperlink Tooltip

<p style="font:15px verdana, helvetica, sans-serif;margin:0;padding:7px;color:#000">This is a <a href="#" title="Tooltip Text">Text Tooltip</a>!</p>


<img src=".. path to the ../image.jpg" title="Hi, I'm Superman!" style="width:100px;height:75pxx;margin:0;padding:0;border:none" />

HTML & Inline CSS

These default tooltips look fairly nasty and they can be improved by styling them using CSS...

This is an example of a text TooltipA tooltip using CSS. styled using CSS. Hover the cursor over the link to see the text.