Tooltips for drop down boxes

[mowen85]

I have a drop down box of a fixed width. That drop down box needs to contain some values that are longer than the desired width. I'm happy for those values to be truncated, but I would like to display the full text in a tooltip (one that I could format to be a multi-lined one) as the option is hovered over (not after you select an option).

Does anyone know if there's an event that's generated when scrolling through the options of a drop down box? I'm taking a guess that there is one, because options are highlighted as you scroll over them, but can you use that event to trigger other functions or is it off limits?

Thanks.

[DangerDev]

hi
you can see event list for drop down box here.
for showing tooltip you can use div element.

[mowen85]

Thanks for your reply, but I'd just already worked out a solution.

When an OPTION in a SELECT has a TITLE attribute, the value of TITLE is automatically shown as a tooltip when you hover over that option. My problem was that I'm using JSF and in that, the way that a drop down menu is dynamically generated doesn't allow for title tags to be added so I thought I'd have to make some tooltips manually.

I've been mucking around in Javascript though and have created a function to call after the page has loaded (and the drop down box has been generated) that will set the TITLE attribute for each OPTION to be whatever the text of that option is. This allows me to have my truncated options but still view the full text by hovering over them.

function addTitleAttributes()
{
   numOptions = document.getElementById('comboBox').options.length;
   for (i = 0; i < numOptions; i++)
      document.getElementById('comboBox').options[i].title =
            document.getElementById('comboBox').options[i].text;
}

I only need this to work in IE so I haven't tested it in any other browser.

[arvindgally]

i tried out adding titles using javascript. But i'm not getting the tool tip.
can u help me to bring the tool tip for each and every options in the select control.

my HTML Code:

<select id="DropDownList1" onmouseover='showHideTooltip();' size='5'style="LEFT: 104px;POSITION: absolute; TOP: 160px;Width:180px;z-index:9999;">
			<option Value="One" Selected="True">One</option>
			<option Value="Two">Two</option>
			<option Value="Three">Threee</option>
			<option Value="Four">Four</option>
			<option Value="Five">Five</option>
		</select>

my javascript Code:
function addTitleAttributes()
{
   numOptions = document.getElementById('DropDownList1').options.length;
   for (i = 0; i < numOptions; i++)
      document.getElementById('DropDownList1').options[i].title = document.getElementById('DropDownList1').options[i].text;
    alert('completed');
}

Thanks for your reply, but I'd just already worked out a solution.

When an OPTION in a SELECT has a TITLE attribute, the value of TITLE is automatically shown as a tooltip when you hover over that option. My problem was that I'm using JSF and in that, the way that a drop down menu is dynamically generated doesn't allow for title tags to be added so I thought I'd have to make some tooltips manually.

I've been mucking around in Javascript though and have created a function to call after the page has loaded (and the drop down box has been generated) that will set the TITLE attribute for each OPTION to be whatever the text of that option is. This allows me to have my truncated options but still view the full text by hovering over them.

function addTitleAttributes()
{
   numOptions = document.getElementById('comboBox').options.length;
   for (i = 0; i < numOptions; i++)
      document.getElementById('comboBox').options[i].title =
            document.getElementById('comboBox').options[i].text;
}

I only need this to work in IE so I haven't tested it in any other browser.

[mowen85]

Tooltips will be displayed in IE7 but not in IE6. I've heard from others this is because in IE6, when you click on a drop down box the browser gives control to the Operating System, so the browser doesn't know anything about where the mouse is or what it's hovering over, so it doesn't trigger the onmouseover event to display a tooltip.

To add the title attributes with Javascript you need to call the addTitleAttributes() function somewhere in your HTML after the drop down box is set.

...
</select>
<script language="javascript">addTitleAttributes();</script>

You shouldn't need any onmouseover event in the <select> tag.

If your just coding in plain HTML you can just add the title tag to each OPTION in the SELECT, you don't need to use Javascript.

<option value="One" title="One" selected>One</option>
...

I just needed to add them with Javascript because I was generating the drop down menu with JSF's selectOneMenu which doesn't allow you to add a title attribute for each option when you're coding it.

[arvindgally]

thank you my friend. now its working for me in IE7. Is there any solution for this to display in IE6 and in other web browsers.?????

could u help me on this issue.

[mowen85]

I don't think you can make tooltips display in IE6. I haven't tried in other browsers.

This is an example of what I've done when I've needed to provide a solution for this problem in IE6. It's for when my option values are of the format name: description.

My scripts break this string up so that "name" is left as what is displayed in the drop down box and the longer "description" associated with each name is displayed in a readonly textarea positioned below my drop down box.

<html>
<head>
<title>test</title>
<script language="JavaScript">
  var names = new Array();
  var descr = new Array();

  function updateTextArea()
  {
    var j = document.getElementById('comboBox').selectedIndex;
    document.getElementById('textArea').innerHTML = descr[j];
  }

  function putOptionsInArray()
  {
    var numOptions = document.getElementById('comboBox').options.length;
    for (i = 0; i < numOptions; i++) {
      var tmp1 = document.getElementById('comboBox').options[i].text;
      var tmp2 = tmp1.indexOf(':');
      names[i] = tmp1.substring(0, tmp2);
      descr[i] = tmp1.substring(tmp2+2);
      document.getElementById('comboBox').options[i].text = names[i];
    }
  }
</script>
</head>

<body>
  <form>
      <SELECT id="comboBox" style="width:250px;" onchange="updateTextArea()">
	  <OPTION value="1" selected>Lorem ipsum: dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</OPTION>
	  <OPTION value="2">incididunt: ut labore et</OPTION>
	  <OPTION value="3">dolore magna aliqua. Ut: enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</OPTION>
	  <OPTION value="4">Sed ut: perspiciatis unde omnis iste natus</OPTION>
      </SELECT>
      <br>&nbsp;<br>
      <TEXTAREA rows="4" cols="50" id="textArea" readonly></TEXTAREA>
      <br>&nbsp;
      <p>Selecting an option from the combo box will change the text in the textarea.</p>

      <script>putOptionsInArray(); updateTextArea();</script>

    </form>
  </body>
</html>

This mightn't be of any use if you don't have a set format that you could break the string up with. You could modify my code to not break up the string at all and just display the full text in the textarea when you select that option from the drop down box. You could then restrict the width of the drop down box and any text longer than that would be truncated which might look a bit messy, but the full text would be displayed in the textarea. I hope that makes sense.

[arvindgally]

Thank you very much dude,,
we decided to continue with IE7 itself.

[hetalshah]

Please i wann to refer showHideTooltip() method

So please give me...

i tried out adding titles using javascript. But i'm not getting the tool tip.
can u help me to bring the tool tip for each and every options in the select control.

my HTML Code:

<select id="DropDownList1" onmouseover='showHideTooltip();' size='5'style="LEFT: 104px;POSITION: absolute; TOP: 160px;Width:180px;z-index:9999;">
			<option Value="One" Selected="True">One</option>
			<option Value="Two">Two</option>
			<option Value="Three">Threee</option>
			<option Value="Four">Four</option>
			<option Value="Five">Five</option>
		</select>

my javascript Code:
function addTitleAttributes()
{
   numOptions = document.getElementById('DropDownList1').options.length;
   for (i = 0; i < numOptions; i++)
      document.getElementById('DropDownList1').options[i].title = document.getElementById('DropDownList1').options[i].text;
    alert('completed');
}

[juliorodmax]

i just tried in Mozilla firefox , and its work great
thanks