Tool Tip Tutorial

Example Found Here.

Please review before continuing.

Nice. And no javascript at all to be found. The colours I have used are for demonstration purposes only to show you that they are adjustable to suit the background or to contrast against them. Your choice. That is a styling issue. It is your site, you decide.

The original author's idea was to add position:relative to the link, in order to allow the span element inside to position absolutely in respect to the parent link.
This code has been tested in Ie5.5, IE6, Opera7.11 and Mozilla 1.4 and works fine. Fails in IE5/mac and NN7/mac, as I found out the hard way.

Now, let's have a look at the basic html and css code for the tooltip:

An Anchor Tag with a Span for the Tool Tip Text



How it Works
The class="info" sets the background colour, the text colour , the position relative and turns off the underlining for the anchors of this class.


The span tag of this anchor is used to hide the display of the spanned text (a.info span{display: none}). When it is hovered over, it resets the background colour of the anchor(a.info:hover), then the span is made visible in an offset position from the anchor (a.info:hover span).

The attributes of the displayed span are set using the a.info:hover span selector.
In this example, it is used to set the text colour and the background colour of the Tool Tip, it locates the displayed text block as an absolutely positioned block from the anchor, adds a border, and alters the text colour.

Sounds like a lot of work for one little selector.

And here is the CSS for the Anchor and Span


Enjoy.

Works fine in 6.0 Jim. Sorry it took so long to find it. Anyway. I like it. I could use it with a change in background colors. It needs to be better though with the text highlight. Is that easily changable? I didn't look the code over a lot. I know very little PHP and even less CSS, but enough to see how it works. And I give it a rating of 4:5. Thre are better ones out there, but it is amazing how you did it with CSS only. Very cool, thanks for sharing.

Very interesting!

Very usefull for me. I Used to use javascripts wich has so many code, but now i'll use css, it's much more easy.

Thanks.

@ wild, i dont mean to speak on a question that you asked jlhaslips but i believe that if you change all of the background attributes


i believe if you change the background attributes it will work, im going to test that out on my site and edit this if it doesnt work

Nice tutorial Jim. If you wanted to get just a little bit fancier, you could add this to a.info hover span:


Of course, it doesn't validate because of the MS filter though and you'd have to have the opacity quite high to make the text readable against the background.

Well, thanks for the support.
It is nice to know that these efforts are appreciated

Wild20: Albus has it right on the mark for changing background-colors to affect the displayed and on:hover colours of the background. To alter the colour of the text, change the color: #fxxxxxx where xxxxxx are hex numbers from 0 to f.
( #ffffff being white and #000000 being black).
The pairs indicate the amount of Red, Green, and Blue, so #ff0000 is full red, #00ff00 is full Green and #0000ff is full blue. There are any number of choices available.

Albus: Thanks for the comment. Always appreciate help around here.

Lyons: Enjoy.

Tyssen: thanks for the tip. My old beater doesn't like opacity whether it is proprietary or not. Don't know if it is the Browser or the machine, but others will appreciate the tip.

i asked jlhaslips if i could post this and he said yes, so i am going to :-D

i was bored and did those for a few of the peole who dont quite know what to edit to change what colors etc.. so this is just to SHOW you what is what and what you should change to get what you want..



DO NOT copy and paste that for the CSS the <<TEXT HERE will mess it up..use the origional one that jlhaslips gave you :-D hope this helps some people

This post has been edited by Albus Dumbledore: Mar 3 2006, 05:56 AM

If you want to insert comments into CSS files in future, do this:
element { style; } /* your comment */