Tooltip Image without js

HTML & CSS
1

Im trying to find a way to display a image when someone hovers over a link without using js.

2

You can use CSS and the background property

a:hover {background: #fff url(directory/image.jpg) no-repeat top left;}
3

Molona, IE doesn’t choke on this?

4

Stomme poes was kind enough to post a link to a very straightforward disjointed rollover tutorial page in another thread that may help…

http://www.pmob.co.uk/pob/disjointed1.htm

looking particularly at the link example about mid-page…seems like it might be an option.

5

Got it working with this.



<style type="text/css">
a.info{
    position:relative;
    z-index:24;
    text-decoration:none}

a.info:hover{z-index:25;}

a.info span{display: none}

a.info:hover span{
    display:block;
    position:absolute;
    top:2em; left:2em; width:15em;
    }

</style>

<a class="info" href="?">???<span><img src="?"></span></a>

Even IE seems to handle it pretty well.

6

That ought to work, but in general you may want to try to avoid changing states on :hover. I’ve run into too many IE6 bugs back when I did (though possibly you don’t have to worry about IE6… depends on your target audience).

What I do instead is have all my states written out for the anchor etc… I’ll have the span already set to pos: abso and I’ll pull it offscreen with a -999em left margin.

So on :hover (and :focus!! Don’t forget :focus), I’ll just change the left margin. That way I’m not changing the state.

I have an insurance form that does this (brings an image onscreen on :hover and :focus) using this method mentioned above.

7

I never had problems with the hover state if it was applied with an anchor… not even in IE6.

The hover states does give problems in IE when it is applied to any other element.

But I may have been lucky :smiley:

8

Sorry, by “state” I meant stuff like “display state” (changing from an inline to a block, that sort of thing). I didn’t mean “the hover state” : )