Following on from the
As simple and effective way to provide an image rollover effects without needing to use javascript.
Using a relatively simple bit of
HyperText Markup Language: a set of standards, a variety of SGML, used to tag the elements of a hypertext document. It is the standard protocol for formatting and displaying documents on the World Wide Web.
HTML and some
Cascading Style Sheets
An extension to HTML to allow styles, e.g. colour, font, size to be specified for certain elements of a hypertext document. Style information can be included in-line in the HTML file or in a separate CSS file (which can then be easily shared by multiple HTML files). Multiple levels of CSS can be used to allow selective overriding of styles.
CSS , a website developer can include nicer
a small rectangular pop-up window that displays a brief description of a toolbar button when a computer mouse lands on that button;
tooltips without having to resort to javascript. The bold/italic text above uses this technique.
It works great in FireFox but I'm having a few IE problems. IE7 shows other ToolLink text through the Tip and IE8 positions things wrong. IE also sometimes has problems if the content is in <p> tags.
Here is how I've done it:
<span class="ToolTip">
<div class="Tip">The tip</div>
<span class="TipLink">The text with the tip</span>
</span>
The TipLink is the visible text and the Tip shows up when the mouse hovers over that text
To make this work you can use the following css. Add your own styles to the Tip class to position and style your own tips.
.ToolTip
{
position: relative;
}
.ToolTip .TipLink
{
font-style: italic; /* effect to indicate this text has a tool tip */
}
.ToolTip .TipLink:hover
{
color: Red; /* effect when the tip link is active */
}
.ToolTip .Tip
{
display: none;
visibility: hidden;
}
.ToolTip:hover .Tip
{
display: inline;
visibility: visible;
position: absolute;
z-index: 20;
}
.Tip
{
position: relative;
/* position relative to the top and left of the TipLink text */
/* firefox has a small problem if the tip does not overlap the TipLink */
left: 10px;
top: 18px;
width: 200px; /* stops the tip taking up the full width of the page */
/* add your own styles defining how the tip looks */
}