Mouse over code for simple text?

[Jen Gailt]

I want to add a simple mouseover code to some stuff on my web page.

For example if they see the word: Mouse
it would have an underline, like it was a link, so people would put the mouse
over it, then text would pop up above their cursor, saying "Mouse over code",
explaining what it was.

Is it simple to do that?

[Winston]

Post by Jen Gailt
I want to add a simple mouseover code to some stuff on my web page.
For example if they see the word: Mouse
it would have an underline, like it was a link, so people would put the
mouse over it, then text would pop up above their cursor, saying "Mouse
over code", explaining what it was.
Is it simple to do that?

Depending on exactly what effect you want and how widely /
browser-independently you want it to work, read up on the following:

* the HTML tags <abbr> and <acronym>

* the intrinsic events onmouseover / onmouseout (requires Javascript)

* the style sheet pseudo-class ":hover" (requires CSS).

HTH,
-WBE

[GeekGranny]

Post by Winston

Post by Jen Gailt
I want to add a simple mouseover code to some stuff on my web page.
For example if they see the word: Mouse
it would have an underline, like it was a link, so people would put the
mouse over it, then text would pop up above their cursor, saying "Mouse
over code", explaining what it was.
Is it simple to do that?

Depending on exactly what effect you want and how widely /
* the HTML tags <abbr> and <acronym>
* the intrinsic events onmouseover / onmouseout (requires Javascript)
* the style sheet pseudo-class ":hover" (requires CSS).
HTH,
-WBE

I'm not sure what they call what I want to do. Like a text tool tip?

Say the word BBB is on my web page, and it's underlined like a link, and
someone doesn't know what BBB means, so they hold the mouse over it and a
text box pops up that says Better Business Bureau.

Something like that doesn't seem like it would be super hard to do, right?

[GeekGranny]

Post by Winston

Post by Jen Gailt
I want to add a simple mouseover code to some stuff on my web page.
For example if they see the word: Mouse
it would have an underline, like it was a link, so people would put the
mouse over it, then text would pop up above their cursor, saying "Mouse
over code", explaining what it was.
Is it simple to do that?

Depending on exactly what effect you want and how widely /
* the HTML tags <abbr> and <acronym>
* the intrinsic events onmouseover / onmouseout (requires Javascript)
* the style sheet pseudo-class ":hover" (requires CSS).
HTH,
-WBE

I tried the acronym tag and it works. Thanks!


<acronym title="as soon as possible"><u>ASAP</u></acronym>

[GeekGranny]

Post by GeekGranny

Post by Winston

Post by Jen Gailt
I want to add a simple mouseover code to some stuff on my web page.
For example if they see the word: Mouse
it would have an underline, like it was a link, so people would put the
mouse over it, then text would pop up above their cursor, saying "Mouse
over code", explaining what it was.
Is it simple to do that?

Depending on exactly what effect you want and how widely /
* the HTML tags <abbr> and <acronym>
* the intrinsic events onmouseover / onmouseout (requires Javascript)
* the style sheet pseudo-class ":hover" (requires CSS).
HTH,
-WBE

I tried the acronym tag and it works. Thanks!
<acronym title="as soon as possible"><u>ASAP</u></acronym>

ACK! I take that back. I tried it and it worked in CoffeeCup HTML Editor but
NOT in Seamonkey after I uploaded it!

[Winston]

Post by GeekGranny

Post by GeekGranny

Post by Winston

Post by Jen Gailt
I want to add a simple mouseover code to some stuff on my web page.
For example if they see the word: Mouse
it would have an underline, like it was a link, so people would put the
mouse over it, then text would pop up above their cursor, saying "Mouse
over code", explaining what it was.
Is it simple to do that?

Depending on exactly what effect you want and how widely /
* the HTML tags <abbr> and <acronym>
* the intrinsic events onmouseover / onmouseout (requires Javascript)
* the style sheet pseudo-class ":hover" (requires CSS).

I tried the acronym tag and it works. Thanks!
<acronym title="as soon as possible"><u>ASAP</u></acronym>

ACK! I take that back. I tried it and it worked in CoffeeCup HTML Editor
but NOT in Seamonkey after I uploaded it!

Don't be too surprised. Different browsers implemented different sets
of tags. That's one reason why you see web sites that say things like
"optimized for [some particular browser]". For example, Netscape 6
supported both <abbr> and <acronym>; MSIE for Mac supported <acronym> but
not <abbr>; and MSIE 6 for Microsoft Windows didn't support either.

Cascading Style Sheets, by comparison, are supported by pretty much all
the newer graphical browsers, and while implementations of that vary, too,
common things like the example below should work the same in all of them.
CSS has several ways of simulating <abbr>. This example uses a fixed
offset, and so doesn't work so well if the abbreviation is too close to the
edge of the screen, but may give you an idea of how style rules can be used
to create various effects:

----------

<head>
<style type="text/css"><!--
.abbrlabel { position:relative; display:inline }
.abbrlabel div { position:absolute; top:17px; display:none }
.abbrlabel:hover div { display:block }
--></style>
</head>
<body>
Here's an abbreviation:
<div class="abbrlabel">CONUS<div>Continental United States</div></div>.
</body>

----------

That technique may not work on tiny-screen cellphone browsers, browsers for
the blind, etc.

HTH,
-WBE

[Adrienne Boswell]

Post by Jen Gailt
I want to add a simple mouseover code to some stuff on my web page.
For example if they see the word: Mouse
it would have an underline, like it was a link, so people would put
the mouse over it, then text would pop up above their cursor, saying
"Mouse over code", explaining what it was.
Is it simple to do that?

You can use the title attribute and CSS, or you could use the title
attribute and the u element (if you are using HMTL5 and the text is NOT a
link - you would also probably want to include some kind of type
convention document on the site).

Using title and CSS:

<span class="underline" title="This text has a hover behavior">Mouse
</span>

Using title and U:

<u title="This text has a hover behavior">Mouse</u>

[Winston]

Post by Jen Gailt
I want to add a simple mouseover code to some stuff on my web page.
For example if they see the word: Mouse
it would have an underline, like it was a link, so people would put
the mouse over it, then text would pop up above their cursor, saying
"Mouse over code", explaining what it was.
Is it simple to do that?

You can use the title attribute ...

...

<span class="underline" title="This text has a hover behavior">Mouse
</span>

...

<u title="This text has a hover behavior">Mouse</u>

Color me embarassed that I forgot about the title attribute. :-/
(I've rarely had occasion to use it myself.)

Jen, yes, try this instead.
-WBE

[Hot-Text]

Post by Jen Gailt
I want to add a simple mouseover code to some stuff on my web page.
For example if they see the word: Mouse
it would have an underline, like it was a link, so people would put the mouse
over it, then text would pop up above their cursor, saying "Mouse over code",
explaining what it was.
Is it simple to do that?

<a href="" title="simple as a mouse over">mouse</a>