How is this done? 1

ksbigfoot · Sep 14, 2006

At this URL:

http://www.cowtowndance.com/forum

In the Calendar area, when I move my mouse over the link, a temporary area is displayed. I don't think it is a popup box, but it is something like it.
I have never seen something like this before.
Does anyone know how this is done?
Thanks.

Xaqte · Sep 14, 2006

They are using javascript to create a absolutely postioned div on the mouseover, and destroying it on mouseout.

But, this can be done without using javascript!

Google, search around for CSS Tooltips. If you can't find it, we'll be happy to help.

Let us know your results!

X

ksbigfoot · Sep 14, 2006

Howdy Xaqte,
Thanks. I didn't know where to start looking.
If I figure it out, I will definitely let you know if I got it working.
ksbigfoot

ksbigfoot · Sep 14, 2006

Howdy Xaqte,
Star to you.
Here is the code I found that works for me.
The website where I copied the code is:

http://psacake.com/web/jl.asp

Code:

<html>
<head>
	<title>Tooltip</title>
	<style>
a.info{
    position:relative; /*this is the key*/
    z-index:24; background-color:#ccc;
    color:#000;
    text-decoration:none}

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

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:#cff; color:#000;
    text-align: center}
</style>
</head>
<body>

<a class=info href="#">tooltip <span>an aiding text that appears just when you roll on with the mouse</span></a>
<p>
This is my second line.

</body>
</html>

Thanks again.
ksbigfoot

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

How is this done? 1

ksbigfoot

Programmer

Xaqte

IS-IT--Management

ksbigfoot

Programmer

ksbigfoot

Programmer

Similar threads

Part and Inventory Search

Sponsor