Sent by Bob Wightman on 3 January 2005 14:02
Big John wrote:
>--- michael ensor [EMAIL-REMOVED]> wrote:
>
>
>
>>Portman wrote:
>>
>>
>>>I was wondering if it is possible to make a "tool tip" appear over a
>>>link on hover with css? I have searched online but cannot find anything.
>>>
>>>
>
>Felix wrote:
>
>
>>Then of course P may have had something like this in mind?
>>
>>http://www.meyerweb.com/eric/css/edge/popups/demo.html
>>
>>
>
>Yeah, that's the stuff. Browser tooltips can't be styled,
>but using Eric's method, pure CSS tooltips can. I like the
>fact that no JS is needed.
>
>Holly Bergevin and I have researched the sites that cover
>this trick, and we just wrote it up in an article for
>Community MX. I managed to sweet talk the editor into
>letting it be free, and not just for the subs only, so
>y'all can go view it on tuesday at communitymx.com.
>I sure hope it passes muster with this group!
>
>There will be further parts exploring advanced trickery,
>but the main problems we encountered in testing are
>covered. Safari is the real bad boy this time, aside from
>IE/Mac not supporting it at all, and Gecko (before the
>most recent ones) had a nasty bug too.
>
>At least IE has no issues with the link based version, and
>thanks to this site:
>
>http://www.xs4all.nl/~peterned/csshover.html
>
>..we will be using M$ proprietary junk in a CC to force
>IE to obey :hover on any element (not just links) in the
>followup tutorials. Too bad Opera insists on a browser
>tooltip for EVERY hovered link, no matter what, but that's
>their problem. Darned thing covers up our nice pretty css
>tooltips! At least IE and Moz only do that when you ask.
>
>Big John
>
>
>
>
First posting to this mail listing so....
I based the tooltips on my site on those of Eric's but rather than have
the tooltip appear in a single location I have each tip appear at a
fixed offset to the element.
http://www.aqvi55.dsl.pipex.com/
The HTML is:
<div id="links01"><a href="index.htm">Main Section page<span>To the
front page</span></a></div>
and the corresponding CSS is:
#links01 a span{
display: none
}
#links01 a:hover span {
border: #000 1px solid;
padding: 5px;
display: block;
z-index: 200;
background: #ffffcd;
left: 230px;
margin: 10px;
font: 10pt verdana, sans-serif;
width: 200px;
color: #411;
position: absolute;
top: 20px;
text-align: left
}
There are two problems with this method:
1. For each element that needs a tooltip, I have to add another ID tag
to the list. I only use them on my site for the navigation buttons on
the left so I can live with this.
2. In IE I had problems with the tooltip not appearing over the content
in the central <div>. I tried setting the z-index to solve this but to
no avail. My "solution" was to place the definition of the links at the
end of the HTML file. The only problem now is that text based browsers
such as Lynx show the button elements as they appear in the document
flow: at the end of the document. I have been mailed a solution that
uses negative z-indices but have not had time to test this.
Bob
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
