Menu
Either using plain HTML or jQuery assisted JavaScript, how do you display tooltips on individual <option> elements to aid the decision process (there is not enough room for a different kind of control and some help will be needed).
Can this be done though a plug-in or similar?
I have tried a few tooltip plugins for jQuery with no success (including the one called Tooltip).
This solution should:
<select> wrapped <option> elements.So if the solution wants to use other tags it should convert those elements into what it needs dynamically (and not expect the initial mark-up to be any different).
The code for this can be found here, it is under the SafeSurf section, where I want to display some help on rollover of the options as to the meaning of the choices. At present it can only be displayed "after the fact" and some upfront help for the user would be beneficial.
Appreciate that this is not easy and that something will probably need to be created - so the bounty will be awarded to the most complete solution or the specific hook that lands me closest to a solution I can create.
684
HTML: Use a container element (like <div>) and add the "tooltip" class to it. When the user mouse over this <div>, it will show the tooltip text. The tooltip text is placed inside an inline element (like <span>) with class="tooltiptext" .
Simply add a title to your button . @EduardLuca, In my case tooltip really does no work on disabled buttons because Bootstrap sets pointer-events: none for disabled state. It should work if set pointer-events: auto directly to the element. it's also that, the tooltip will aim to show bottom from where the mouse is.
HTML title Attribute The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.
It seems in the 2 years since this was asked, the other browsers have caught up (at least on Windows... not sure about others). You can set a "title" attribute on the option tag:
<option value="" title="Tooltip">Some option</option>
This worked in Chrome 20, IE 9 (and its 8 & 7 modes), Firefox 3.6, RockMelt 16 (Chromium based) all on Windows 7
133
If increasing the number of visible options is available, the following might 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> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
