how to use tooltip in select element

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
zia
Forum Newbie
Posts: 9
Joined: Fri Jan 03, 2003 3:51 am

how to use tooltip in select element

Post by zia »

Hello everybody,

Would you please give me some tips aboput tooltip? I would like to use it with <option> of <select> element. The text will come from oracle database. And I like to happen this when user will move cursor over the options of <select> element. I am working with PHP, Apache and Oracle.

Thank you in advance.

ZIA
User avatar
patrikG
DevNet Master
Posts: 4235
Joined: Thu Aug 15, 2002 5:53 am
Location: Sussex, UK

Post by patrikG »

You just need HTML:

Code: Select all

<a href="whatever.html" title="This is a link to whatever.html">whatever</a>
the key is "title" - works like the "alt" for images.
zia
Forum Newbie
Posts: 9
Joined: Fri Jan 03, 2003 3:51 am

Post by zia »

patrikG

Thank you. But that is not the solution I am seeking for. I want to show tooltip when users will scroll over their mouse on the options of a pulldown menu(<select> element).

Do you know how can I accomplish this?

ZIA
User avatar
twigletmac
Her Royal Site Adminness
Posts: 5371
Joined: Tue Apr 23, 2002 2:21 am
Location: Essex, UK

Post by twigletmac »

You can use the title attribute in the option tags:

Code: Select all

<option value="something" title="something else">text</option>
but whether or not a browser will show that info to the user as a 'tooltip' will depend on the browser.

Mac
User avatar
twigletmac
Her Royal Site Adminness
Posts: 5371
Joined: Tue Apr 23, 2002 2:21 am
Location: Essex, UK

Post by twigletmac »

Just done a couple of tests and as far as I can see:
IE 5 - no (doesn't show tooltip)
Mozilla - yes (shows tooltip)
Netscape 6 - yes
Opera 6 - no
Netscape 4 - no

Not an exhaustive test but support seems fairly patchy. Maybe you want to think a little more about what you are trying to accomplish?

Mac
zia
Forum Newbie
Posts: 9
Joined: Fri Jan 03, 2003 3:51 am

Post by zia »

twigletmac

I have tested with IE 6 and it doesn't show. Is their any other way to accomplish it through IE?

Thank you.

ZIA
User avatar
twigletmac
Her Royal Site Adminness
Posts: 5371
Joined: Tue Apr 23, 2002 2:21 am
Location: Essex, UK

Post by twigletmac »

Having done a search on Google for tooltip select option it looks like an IE solution involves a lot of JavaScript and CSS hacking. Maybe there's another way you could get the information you need to to your users?

Mac
User avatar
patrikG
DevNet Master
Posts: 4235
Joined: Thu Aug 15, 2002 5:53 am
Location: Sussex, UK

Post by patrikG »

<select> under IE 4+ supports the "onmouseover"-event. So basically, you can create an associative array with tooltips for each individual <select>-option. Get the mouse-co-ordinates when the mouseover is triggered, write the tooltip from your associative array into the layer, move the layer to the x,y-co-ordinates, then make it visible.

That way you would have something wich would work in IE - but I have no clue whether <select> supports "onmouseover" in other browsers.
Post Reply