On Sat, 10 Mar 2007, Gunlaug Sørtun wrote:
It can be done 'solely with CSS', but browser-support may still be a
problem.
Generated content...
Generated content isn't supported by IE even in IE 7, but you can achieve
a "tooltip" effect (often mistakenly called "AltText" phenomenon) in pure
CSS in a manner that works on IE 7, too, so it's promising in a year's
perspective or so.
The idea is to include the tooltip text to that it has display: none
initially but changes (for example) to display: block when a parent
element is moused over. For a link, this could be something like the
following:
<style type="text/css">
.tooltipped { position: relative; }
.tooltip { display: none; }
.tooltipped:hover .tooltip {
display: block;
top: 1em;
left: 2em;
width: 20em;
position: absolute;
background: #ffe;
color: black;
border: solid black 1px;
padding: 0.2em 0.3em;
text-decoration: none;
z-index: 9999; }
</style>
<body>
<a class="tooltipped" href="#">foo<span class="tooltip">
This is a tooltip.</span></a>
For a non-link piece of text, you can use <span> (or maybe <abbr> or
<acronym> or other markup when you see it as suitable, possibly with a
dotted bottom border to give a hint about something available on
mouseover) instead of <a>
--
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
