Jump to content
xisto Community
Sign in to follow this  
jlhaslip

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

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

@ 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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 :lol:
Edited by Albus Dumbledore (see edit history)

Share this post


Link to post
Share on other sites

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 by Albus Dumbledore (see edit history)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.