Re: Tooltips for drop down boxes

•

What is DaniWeb IT Discussion Community?

You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 330,319 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,725 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

•

FAQ | Community Rules | Welcome Guide

Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting

Tooltips for drop down boxes

•

Join Date: Mar 2008

Posts: 6

Reputation: mowen85 is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

mowen85

Offline

Newbie Poster

Re: Tooltips for drop down boxes

Mar 26th, 2008

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.

Help with Code Tags

(Toggle Plain Text)

<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.

DaniWeb Home > Forums > Web Development > JavaScript / DHTML / AJAX > Tooltips for drop down...

Re: Tooltips for drop down boxes

Tooltips for drop down boxes

Re: Tooltips for drop down boxes