User Name Password Register
DaniWeb IT Discussion Community
Home
Forums
Tutorials
Code Snippets
Blogs
Link Directory
All
•
•
•
•
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 375,238 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,112 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!
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 3438 | Replies: 7
Reply
•
•
Join Date: Mar 2008
Posts: 9
Reputation: mowen85 is an unknown quantity at this point 
Rep Power: 0
Solved Threads: 0
mowen85 mowen85 is offline Offline
Newbie Poster

Tooltips for drop down boxes

  #1  
Mar 11th, 2008
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.
AddThis Social Bookmark Button
Reply With Quote  
•
•
Join Date: Jan 2008
Location: Bangalore, India
Posts: 327
Reputation: DangerDev is an unknown quantity at this point 
Rep Power: 0
Solved Threads: 31
DangerDev's Avatar
DangerDev DangerDev is offline Offline
Posting Whiz

Re: Tooltips for drop down boxes

  #2  
Mar 12th, 2008
hi
you can see event list for drop down box here.
for showing tooltip you can use div element.
A computer lets you make more mistakes faster than any invention in human history - with the possible exceptions of handguns and tequila.
~Mitch Ratcliffe
Reply With Quote  
•
•
Join Date: Mar 2008
Posts: 9
Reputation: mowen85 is an unknown quantity at this point 
Rep Power: 0
Solved Threads: 0
mowen85 mowen85 is offline Offline
Newbie Poster

Solution Re: Tooltips for drop down boxes

  #3  
Mar 12th, 2008
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.

Help with Code Tags 
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.
Reply With Quote  
•
•
Join Date: Mar 2008
Posts: 3
Reputation: arvindgally is an unknown quantity at this point 
Rep Power: 0
Solved Threads: 0
arvindgally arvindgally is offline Offline
Newbie Poster

Re: Tooltips for drop down boxes

  #4  
Mar 25th, 2008
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:
Help with Code Tags
html Syntax (Toggle Plain Text) 
  1. <select id="DropDownList1" onmouseover='showHideTooltip();' size='5'style="LEFT: 104px;POSITION: absolute; TOP: 160px;Width:180px;z-index:9999;">
  2. 			<option Value="One" Selected="True">One</option>
  3. 			<option Value="Two">Two</option>
  4. 			<option Value="Three">Threee</option>
  5. 			<option Value="Four">Four</option>
  6. 			<option Value="Five">Five</option>
  7. 		</select>
  8.  
  9. my javascript Code:
  10. function addTitleAttributes()
  11. {
  12.    numOptions = document.getElementById('DropDownList1').options.length;
  13.    for (i = 0; i < numOptions; i++)
  14.       document.getElementById('DropDownList1').options[i].title = document.getElementById('DropDownList1').options[i].text;
  15.     alert('completed');
  16. }

•
•
•
•
Originally Posted by mowen85 View Post
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.

Help with Code Tags 
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.
Last edited by peter_budo : Mar 27th, 2008 at 2:35 am. Reason: Keep It Organized - please use [code] tags
Reply With Quote  
•
•
Join Date: Mar 2008
Posts: 9
Reputation: mowen85 is an unknown quantity at this point 
Rep Power: 0
Solved Threads: 0
mowen85 mowen85 is offline Offline
Newbie Poster

Re: Tooltips for drop down boxes

  #5  
Mar 25th, 2008
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.

Help with Code Tags 
...
</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.

Help with Code Tags 
<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.
Reply With Quote  
•
•
Join Date: Mar 2008
Posts: 3
Reputation: arvindgally is an unknown quantity at this point 
Rep Power: 0
Solved Threads: 0
arvindgally arvindgally is offline Offline
Newbie Poster

Re: Tooltips for drop down boxes

  #6  
Mar 26th, 2008
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.
Reply With Quote  
•
•
Join Date: Mar 2008
Posts: 9
Reputation: mowen85 is an unknown quantity at this point 
Rep Power: 0
Solved Threads: 0
mowen85 mowen85 is offline Offline
Newbie Poster

Re: Tooltips for drop down boxes

  #7  
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 
<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.
Reply With Quote  
•
•
Join Date: Mar 2008
Posts: 3
Reputation: arvindgally is an unknown quantity at this point 
Rep Power: 0
Solved Threads: 0
arvindgally arvindgally is offline Offline
Newbie Poster

Re: Tooltips for drop down boxes

  #8  
Mar 27th, 2008
Thank you very much dude,,
we decided to continue with IE7 itself.
Reply With Quote  
Reply

•
•
•
•

Only community members can participate in forum threads. You must register or log in to contribute.

Register
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

 

•
•
•
•
•
•
•
•
DaniWeb JavaScript / DHTML / AJAX Marketplace
•
•
•
•
Thread Tools Display Modes
Linear Mode Linear Mode

Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum

Advertising Opportunities on DaniWeb
Contact Us - Newsletter Archive - Sitemap - Privacy Statement
All times are GMT -4. The time now is 4:25 am.
Forum system based on vBulletin Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
©2003 - 2008 DaniWeb® LLC