Best IT Recipes

How can I display a tooltip in an HTML option tag?

Either using simple JavaScript or jQuery JavaScript help, as you show tooltips for individual <option> elements to help the decision-making process (not enough space to control another type, and some help will be needed).

Can this be done with a plugin or the like?

I tried several plugins for tooltips for jQuery without success (including called Tooltip).

This decision should:

  • works in IE, WebKit, as well as in Gecko;
  • using standard <select> wrapped <option> elements.

So, if a solution wants to use other tags, it should transform these elements into what it needs dynamically (and not expect the initial markup to be different).



The code for this can be found here , it is in the SafeSurf section, where I want to display some help when overturning options about the meaning of the choice. Currently, it can only be displayed “after the fact,” and some support for the user would be helpful.

Appreciate that this is not easy, and something will probably need to be created in order for the award to be awarded to the most complete solution or to the specific hook that gives me the closest to the solution that I can create.

+50
jquery html jquery-plugins tooltip
Jul 14 '10 at 19:11
source share
7 answers

It seems that in the two years since it was asked, other browsers have caught up (at least on Windows ... not sure about others). You can set the "title" attribute in the option tag:

<option value="" title="Tooltip">Some option</option>

This worked in Chrome 20, IE 9 (and its modes 8 and 7), Firefox 3.6, RockMelt 16 (based on Chromium) on Windows 7

+68
Jul 6 '12 at 17:50
source share

If the number of available visible options is available, the following may work for you:

 <html> <head> <title>Select Option Tooltip Test</title> <script> function showIETooltip(e){ if(!e){var e = window.event;} var obj = e.srcElement; var objHeight = obj.offsetHeight; var optionCount = obj.options.length; var eX = e.offsetX; var eY = e.offsetY; //vertical position within select will roughly give the moused over option... var hoverOptionIndex = Math.floor(eY / (objHeight / optionCount)); var tooltip = document.getElementById('dvDiv'); tooltip.innerHTML = obj.options[hoverOptionIndex].title; mouseX=e.pageX?e.pageX:e.clientX; mouseY=e.pageY?e.pageY:e.clientY; tooltip.style.left=mouseX+10; tooltip.style.top=mouseY; tooltip.style.display = 'block'; var frm = document.getElementById("frm"); frm.style.left = tooltip.style.left; frm.style.top = tooltip.style.top; frm.style.height = tooltip.offsetHeight; frm.style.width = tooltip.offsetWidth; frm.style.display = "block"; } function hideIETooltip(e){ var tooltip = document.getElementById('dvDiv'); var iFrm = document.getElementById('frm'); tooltip.innerHTML = ''; tooltip.style.display = 'none'; iFrm.style.display = 'none'; } </script> </head> <body> <select onmousemove="showIETooltip();" onmouseout="hideIETooltip();" size="10"> <option title="Option #1" value="1">Option #1</option> <option title="Option #2" value="2">Option #2</option> <option title="Option #3" value="3">Option #3</option> <option title="Option #4" value="4">Option #4</option> <option title="Option #5" value="5">Option #5</option> <option title="Option #6" value="6">Option #6</option> <option title="Option #7" value="7">Option #7</option> <option title="Option #8" value="8">Option #8</option> <option title="Option #9" value="9">Option #9</option> <option title="Option #10" value="10">Option #10</option> </select> <div id="dvDiv" style="display:none;position:absolute;padding:1px;border:1px solid #333333;;background-color:#fffedf;font-size:smaller;z-index:999;"></div> <iframe id="frm" style="display:none;position:absolute;z-index:998"></iframe> </body> </html>
+10
Jul 23 2018-10-23T00:
source share

I do not think that this could be done in all browsers.

W3Schools reports that option events exist in all browsers, but after configuration it is a test demo . I can make it work only for Firefox (not Chrome or IE), I have not tested it in other browsers.

Firefox also allows mouseenter and mouseleave, but this is not reported on the w3schools page.



Update: Honestly, if you look at the code for the code you provided, I would not even use the selection box. I think it would be better with a slider . I updated your demo . I had to make a few minor changes to your rating object (adding a level number) and the safesurf tab. But I left almost everything else.

+3
Jul 14 2018-10-14T00:
source share

I just tried to do this in Chrome:

 var $sel = $('#sel'); $sel.find('option').hover(function(){$sel.attr('title',$(this).attr('title'));console.log($(this).attr('title'))}, function(){$sel.attr('title','');});

However, guidance never works ... So you won’t be able to do this at all using the standard selection. You could achieve this, at least using some non-standard methods:

  • You can fake the selection box using radio windows that look like dropdown menus. So, for example, set the absolute position of the radio window and the opacity set to 0, placed above the stylized field, which pretends to be an option.
  • Or you can use pure javascript and have a series of boxes and add onclick javascript events to recreate Dropbox yourself - so that you update the hidden value by the fact that the window was clicked using javascript.
  • Or use one of the already custom libraries. (If there's?)
+3
Jul 18 2018-10-18T00:
source share

At least in firefox you can set the "title" attribute in the option tag:

<option value="" title="Tooltip">Some option</option>

+2
Jul 14 '10 at 19:14
source share

Why use a drop down list? The only way the user sees your explanatory text is to blindly hang over one of the options.

I think that it would be preferable to use a group of radio buttons, and next to each element put a tooltip icon indicating additional information, and also display it after selection (for example, you currently have one).

I understand that this definitely does not solve your problem, but I see no reason to fight with the html element, which is known for its inflexibility, when you could just use the one that works best in the first place.

+2
Jul 22 '10 at 19:18
source share

I do not believe that you can achieve this functionality with a standard <select> element.

I would suggest using this method.

http://filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/

The basic version does not take up too much space, and you can easily bind mouseover events to sub-items to show a good hint.

Hope this helps, Sinan.

+1
Jul 18 2018-10-18T00:
source share


More articles:


All Articles