Tool Tips Using Only Css To Pop Up The Tool Tip No javascript involved

[jlhaslip 4]

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

 

<a class=info href="Your Linked URL  goes Here">display text here <span> Tool Tip Text Here </span> </a>

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

a.info{	position:relative; /*this is the key*/	z-index:24; background-color:#f0c0c0;	color:#666;	text-decoration:none}a.info:hover{z-index:25; background-color:#e1e1e1}a.info span{display: none}a.info:hover span{ /*the span will display just on :hover state*/	display:block;	position:absolute;	top:2em; left:2em; width:15em;	border:1px solid #0cf;	background-color:#cfc;	color:#cc3366;	text-align: center}

Enjoy.

[wild20 0]

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.

[Lyon2 0]

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.

[Albus Dumbledore 0]

@ 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

a.info{

position:relative; /*this is the key*/

z-index:24; background-color:#f0c0c0;

color:#666;

text-decoration:none}

 

a.info:hover{z-index:25; background-color:#e1e1e1}

 

a.info span{display: none}

 

a.info:hover span{ /*the span will display just on :hover state*/

display:block;

position:absolute;

top:2em; left:2em; width:15em;

border:1px solid #0cf;

background-color:#cfc;

color:#cc3366;

text-align: center}

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

[Tyssen 0]

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

 

opacity:0.95;filter:alpha(opacity=95);

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.

[jlhaslip 4]

Well, thanks for the support. It is nice to know that these efforts are appreciatedWild20: 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.

[Albus Dumbledore 0]

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

a.info{	position:relative; /*this is the key*/	z-index:24; background-color:#f0c0c0;   /*changes the highlight color of the text that the info will show up for*/	color:#666; /*it changes the tint of the text that is highlighted*/	text-decoration:none}a.info:hover{z-index:25; background-color:#e1e1e1}  /*changes the background color of the text when you hover over it*/a.info span{display: none} /*hides the span until on:hover happens*/a.info:hover span{ /*the span will display just on :hover state*/	display:block;	position:absolute;	top:2em; left:2em; width:15em;	border:1px solid #0cf; /*obviously the border color of the info box that shows up on hoover*/	background-color:#cfc; /*changes the background color of the info box that shows up on hover*/	color:#cc3366; /*changes the tint of the text that shows up on hover*/	text-align: center} /*alignment of the text that shows up on hoover*/

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
Edited March 3, 2006 by Albus Dumbledore (see edit history)

[Tyssen 0]

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

[Albus Dumbledore 0]

thanx, i probably would have but my intent for the post was just to show the viewers what they need to change in order to change different attributes of the tool..it wasn't for them to copy and paste my post and use it, but i suppose ill change it :-D thanx again*edit* ok i edited it

Edited March 3, 2006 by Albus Dumbledore (see edit history)