Solved

How to get tooltip for a HTML DropDown options (Select box) ?

Posted on 2004-08-25
3
859 Views
Last Modified: 2008-01-09
I have a select box of limited width. The names of the options are longer than the available select box width. How can I get the full option names appearing as tooltips, when going over the options...
0
Comment
Question by:hyder
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 250 total points
ID: 11892361
Mozilla based browsers only:

<option title="your tooltip"> option1 </option>

For IE there is nothing.  If you have to have the functionality for IE, you have to build a custom DHTML control and script the behaviours of a select.

Cd&
0
 
LVL 15

Expert Comment

by:joeposter649
ID: 11896627
Maybe option group's would help you here...
http://www.w3schools.com/tags/tag_optgroup.asp
0
 

Expert Comment

by:Heama
ID: 12255969
<HTML>
<HEAD>
<TITLE>Radhika's ........ :)</TITLE>
<style>
a.info{position: relative;z-index:24;background-color:#ccc; color:#000; text-decoration:none}
a.info:hover{z-index:25}
a.info span{display: none}
a.info:hover span{display:block;
    position:absolute; top:2em;left:2em; width:10em;
    border:1px solid #000; background-color:#FFFFCC; color:#000;text-align: center}
   
</style>
<SCRIPT>
function mOver()
{
      document.all.sp.innerHTML = document.a.s.options[document.a.s.selectedIndex].text;
}
function mOut()
{
      document.all.sp.innerHTML = "";
}
</SCRIPT>
</HEAD>
<BODY>
<form name=a>
<a class="info" href="javascript:void(0)">
<select name=s onmouseover="mOver()" onmouseout="mOut()">
      <option value=1>one</option>
      <option value=2>two</option>
      <option value=3>three</option>
</select><span id=sp></span></a>
</form>

</BODY>
</HTML>
0

Featured Post

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

636 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question