...

View Full Version : ALT function on text



tengan
03-07-2004, 06:39 PM
Hi!

I know that I have seen a code in CSS or PHP that makes a yellow window appear when you hover a text with your mouse. Just like when you hover over an image with an "ALT" function.

Please help me! What's the got damn code that i have forgotten?!

pb&j
03-07-2004, 06:54 PM
perhaps adding this to your link tag?

title="my text here"

gsnedders
03-07-2004, 07:49 PM
Example page:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Test</title>
</head>
<body>
<p>This part will not have anything appearing when your mouse is
over, <span title="This is what you mean, don't you">this
does</span>, so that is that.</p>
</body>
</html>


I didn't know you could do that to text, but now I do, so I've learn't something as well.

gsnedders
03-07-2004, 08:00 PM
If you go to http://f1unleashed.geoffers.uni.cc/drivers.php and put your mouse over Michael Schumacher (the others don't work, yet) then you will see an example on my site, to put more than one line in you put something like this
<span title="Age: 35
Nationality: German
GP starts: 194
GP wins: 70
GP points: 1038">Michael Schumacher</span>

missing-score
03-07-2004, 09:28 PM
It works in internet explorer, but in mozilla you just get  characters for the return spaces, and it places them on one line.

gsnedders
03-07-2004, 10:05 PM
It works in Apple Safari (the only browser I tested it in) and I see what you mean in FireFox.

Antoniohawk
03-07-2004, 10:38 PM
I was browsing the internet the other day and I found an article about this very subject, let me see if I can find it again.

tengan
03-08-2004, 06:33 PM
Thanks everyone!!! I found out, like one hour after posting this message that you could write (as Error writes) title="something" and it works well (in Internet Explorer, haven't tried it in the other browsers, but apparently it doesn't work in all browsers)

Thanks anyway!!!

gsnedders
03-08-2004, 07:46 PM
I can say that it works in IE5.2 Mac, Apple Safari, FireFox (but only a single line).

Vladdy
03-08-2004, 10:47 PM
Since the required information for "tooltip" is multiline I would approach it differently:


<style type="text/css">

.hasinfo div
{ display: none;
position: absolute;
margin: 0px 0px 0px 0px; /*Use margin to position
the "tooltip" relative to
parent element*/
}

.hasinfo:hover div
{ display: block;
}
</style>

<span class="hasinfo">Text to hover over
<div>This info will pop up. <br />
Can have pretty much any HTML formating here
</div>
</span>

See this (http://www.codingforums.com/showthread.php?s=&threadid=32369&highlight=hover) for the way to make it work in dumb IE.

__________

If you do like using title attribute, but would like to have the ability to change its presentation, consider this:
www.klproductions.com/kltooltips.html

gsnedders
03-09-2004, 12:12 AM
Originally posted by Vladdy
Since the required information for "tooltip" is multiline I would approach it differently:


<style type="text/css">

.hasinfo div
{ display: none;
position: absolute;
margin: 0px 0px 0px 0px; /*Use margin to position
the "tooltip" relative to
parent element*/
}

.hasinfo:hover div
{ display: block;
}
</style>

<span class="hasinfo">Text to hover over
<div>This info will pop up. <br />
Can have pretty much any HTML formating here
</div>
</span>

See this (http://www.codingforums.com/showthread.php?s=&threadid=32369&highlight=hover) for the way to make it work in dumb IE.

__________

If you do like using title attribute, but would like to have the ability to change its presentation, consider this:
www.klproductions.com/kltooltips.html


You've lost me, what is suppost to be in the box and what the text where you put your mouse over to see it.

Vladdy
03-09-2004, 12:18 AM
Here is a demo that uses <li> for hover action: http://www.vladdy.net/Demos/SuppInfoPopUp.html

gsnedders
03-09-2004, 12:21 AM
Originally posted by Vladdy
Here is a demo that uses <li> for hover action: http://www.vladdy.net/Demos/SuppInfoPopUp.html

I'll have to work out how those work at the weekend (got school monday to friday, only don't have homework on wednesday, on which I go to cinema).

gsnedders
04-14-2004, 07:52 PM
Here is a demo that uses <li> for hover action: http://www.vladdy.net/Demos/SuppInfoPopUp.html

Could you turn that into spans for me plz, cos I don't fully understand the code...


Forget it, I just worked it out!!!

me'
04-14-2004, 08:03 PM
Surely a definition list would be a better semantic markup of that problem?
<dl>
<dt>Hello World</dt>
<dd>Tooltip goes here</dd>
</dl>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum