Tooltip Image Hover

Image Description on image hover

[ball4121]

Ok I run a game site that contains lots of flash games. What I want is when someone hover's over an image, a box appears that has like a nice border etc. and contains a description sorta like what you get when you do a title="" but more designed looking.

How can I do this?

[doodlebee]

Answer is in this thread. [webmasterworld.com]

[4css]

do a search for Pure CSS Tooltips. It involves putting a span into your styles, and you can do it all via css with no javascript involved.

The first link on the search is the one you might want to read and try out.

[ball4121]

Thanks alot guys! I got it but there is one thing I cannot figure out. I want to have the box follow my cursor and not be placed in a set place. I've been messing with the position i've tried
relative
static
inherit
and i'm currently using absolute.

How can I make it follow my cursor?

[doodlebee]

To make it follow your cursor, you're going to need Javascript. CSS won't do it alone.

[4css]

With just css:

<span title="This is a CSS tool-tip" style="cursor: help;">Hover Here</span>

Another example that will place a dotted line under your words:

<span title="This is another CSS tool-tip" style="cursor: help; border-bottom: 1px dashed #000000;">Another Example</span>

It can be done with css only.

You can make the text for your tool-tips pretty long and most browsers will still show them. Firefox is the only browser (as far as I can tell) that truncates the tool-tip to a shortened length. The other browsers I have tested will display a much longer tool-tip although I am sure they have a maximum limit too. I have tested these tool-tips in IE, Firefox, Opera, and Konquerer. Please let me know how they work in other browsers specifically if there is a problem.

Source:Tool tips with css only [netlobo.com]

If you google css curser tool tipYou will find many on there to help you out. I would suggest reading a good amount of them as I am sure there are some other examples. I just picked out the first one to show that with CSS just about anything and everything can be accomplished.

[doodlebee]

See...I *knew* if I said "it can't be done without javascript" someone would come along and prove me wrong ;)

[4css]

LOL! Its all about reading and research. Just so happens that I just read about it in a book, and knew it was possible, so I just did a google on it to get the information. ;)

Have a great one!