Hover over options? 1

[fpgiv]

Hi,
I have some select boxes, and I want text to appear when the mouse hovers over the various options inside them. I use <acronym title='this hovers over'>text goes here</acronym> to make text appear when a user hovers over text, but it doesn't seem to be working in this case? Does anyone know how to make it so I can get text to appear when the mouse hovers over the various options in a select box?
Thanks.

 

[mattygriff]

You need to add

alt='Alternative Text Here'

inside your <A href='......> tag.

 

[YNOTU]

And my favorites:

1. Dynamic Drive's version

2. The original

 

[glenmac]

For NS use the "title" attribute ie. title = "Alternative Text Here" in your image tag.

Glen

http://lantzvillecomputers.ca

 

[manarth]

arrrhhh! alt is NOT A TOOLTIP!

alt is the alternative text used by image-less technology (text->speech engines, etc).

use the title attribute for a tooltip: it works on almost all elements - not just acronyms.

<a href="mylink.html" title="tooltip here">link text</a>

Note: if an image has an alt but no title tag, IE displays the alt as a tooltip. if it has both alt and title, IE displays the title as a tooltip. So a title attribute has precedence for tooltips.

Most other browsers do not show alts as tooltips; they rely solely on the title attribute.

<marc> i wonder what will happen if i press this...[ul][li]please tell us if our suggestion has helped[/li][li]need some help? faq581-3339[/li][/ul]

 

[fpgiv]

Hi, I'm not using images. I'm trying to get it to display over the various options in select boxes.

 

[manarth]

OK, in theory, you would use the following code:

<select name="month" id="month">
  <option value="1" [COLOR=red]title="January"[/color]>Jan</option>
  <option value="2" title="February">Feb</option>
  <option value="3" title="March" selected="selected">Mar</option>
  <option value="4" title="April">Apr</option>
  <option value="5" title="May">May</option>
  <option value="6" title="June">Jun</option>
  <option value="7" title="July">Jul</option>
  <option value="8" title="August">Aug</option>
  <option value="9" title="September">Sep</option>
  <option value="10" title="October">Oct</option>
  <option value="11" title="November">Nov</option>
  <option value="12" title="December">Dec</option>
</select>

However, whilst Mozilla (1.6) - and I'm sure most compliant browsers - pops-up a tool-tip; IE6 does not. This is a failure of IE to comply with W3C standards.

For the sake of completeness - despite it being invalid code - I also tested using the alt attribute on an <option> with IE (<option value="1" alt="January">Jan</option>) with the expected result: it doesn't pop-up a tooltip.

I suggest you use the title tag for compliance, and a javascript solution for IE. The javascript solution could use the existing title tag for the popup text, which would save duplication.

<marc> i wonder what will happen if i press this...[ul][li]please tell us if our suggestion has helped[/li][li]need some help? faq581-3339[/li][/ul]

 

[fpgiv]

Yeah, the application I work on is for IE 6 Users only. I tried both the title and the alt thing as well. That's a good idea to use the title field for the javascript popup, so I'll do that. Do you know of any easy to use javascript that I could add to do the onhover property for these options?
Thanks.

 

[manarth]

This DHTML tooltip library may be adaptable for what you're trying to achieve.

There are a few more: simly google 'javascript tooltip' for a whole mixed bag of tricks

<marc> i wonder what will happen if i press this...[ul][li]please tell us if our suggestion has helped[/li][li]need some help? faq581-3339[/li][/ul]

 

[YNOTU]

Did my post get lost in the mix?

 

[manarth]

lol, sorry DeCojute - your post is indeed pertinent. It just took us a while to get there

<marc> i wonder what will happen if i press this...[ul][li]please tell us if our suggestion has helped[/li][li]need some help? faq581-3339[/li][/ul]

 

[YNOTU]

;-) No problem. I was just making sure we were not being redundant on our suggestions.

Glad to help

 

[fpgiv]

I used the dynamic drive version and I still can't get it to work. The overLIB version seems to be the same sort of thing. Has anyone actually ever gotten this to work or seen this working somewhere?

Using the dynamic drive version, I get the tooltip to show up when I hover over the select box, but it doesn't display the title of the one that I'm hovering over.

My code looks like this <code>
<select onmouseover="ddrivetip(this.selected)" onmouseout="hideddrivetip()" name="chosenreqs" size="3">
<option title="displayme at hoverover" value="1">option1</option>
<option title="displayme at hoverover2" value="2">option2</option>
</select>

 

[YNOTU]

I use in all my pages as much as possible.

What seems to be the problem? Can you provide us the URL where you're using it?

 

[fpgiv]

Hi, I can't provide the url because it's an on a company Intranet. However, the main t problems that I'm getting is this:

1)I want the tooltip to appear when I hover over an option. I don't want it to appear when I hover over the select box by itself, only the options within them. I don't want the user to have to select an option, just hover over one of them.

Thanks.

 

[fpgiv]

Also, when I try it like this, it seems as though the onmouseover action never gets called.

<select name="chosenreqs" size="3">
<option onmouseover="ddrivetip(this.title)" onmouseout="hideddrivetip()" title="please work" value="48">007</option>
<option onmouseover="ddrivetip(this.title)" onmouseout="hideddrivetip()" title="Change the description field." value="49">007.1</option>
<option onmouseover="ddrivetip(this.title)" onmouseout="hideddrivetip()" title="Change the Display in IU list option of the IU Number." value="50">IU-007.2</option>
</select>

 

[YNOTU]

And of course you read the "Documentation Page" right?? where it said to add to important lines to your page

  <script type="text/javascript" src="overlib.js"><!-- overLIB (c) Erik Bosrup --></script>

Then place the following line inside the <body></body> section of your page--preferably immediately after the body section starts, i.e., just after the <body> tag (this is important!):

  <div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>

 

[YNOTU]

Can't really trouble-shoot it if I don't and or can't see your source code and how you're implementing this...

 

[fpgiv]

I was using the dynamic drive method. Do you know of any pages on the web that have it so the tooltip appears for options inside of select boxes?

 

[YNOTU]

I have never used the dynamic drive code and only provided you with the link as an option. I only used overLIB