ansaurus

Question

Displaying tooltips on HTML <option> tags

Answer 1

A:

At least on firefox, you can set a "title" attribute on the option tag:

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

DulabCMS 2010-07-14 19:14:05

But sadly doesn't work in Chrome (Ubuntu 10.04).

David Thomas 2010-07-14 19:16:30

Agreed - I'm already using title="" and unfortunately WebKit it falls by the wayside.

Metalshark 2010-07-14 19:31:29

Answer 2

+1 A:

I don't think this would be possible to do across all browsers.

W3Schools reports that the option events exist in all browsers, but after setting up this test demo. I can only get it to work for Firefox (not Chrome or IE), I haven't tested it on other browsers.

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

Update: Honestly, from looking at the example code you provided, I wouldn't even use a select box. I think it would look nicer with a slider. I've updated your demo. I had to make a few minor changes to your ratings object (adding a level number) and the safesurf tab. But I left pretty much everything else intact.

fudgey 2010-07-14 21:56:50

I've updated my answer... it's a personal opinion, but maybe a better option for you.

fudgey 2010-07-18 19:42:35

Aha, yes a slider *seems* like a much better option for this. The question still stands but will probably use on in the final code.

Metalshark 2010-07-18 21:09:42

Answer 3

A:

I don't believe that you can achieve this functionality with standard <select> element.

What i would suggest is to use such way.

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

The basic version of it won't take too much space and you can easily bind mouseover events to sub items to show a nice tooltip.

Hope this helps, Sinan.

Sinan Y. 2010-07-18 13:43:33

The flat drop downs here cause browser windows to jump around like a mad man - also by not using the <select> tags it goes odd on mobile browsers.

Metalshark 2010-07-18 13:58:42

that is just the idea what i suggested is not taking the ready solution on that link. An `ul` unordered list is supported on any browser, and the rest is just showing and hiding `li` items. I still believe this should be the way to go.

Sinan Y. 2010-07-18 16:16:03

Answer 4

+2 A:

I just tried doing this on 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, the hover enter never fires... So you wouldn't be able to do this at all using the standard select. You could achieve this though through some non standard ways:

You could fake a select box by using radio boxes that look like dropdowns. So for example, have a radio box absolute positioned and opacity set to 0 placed over the styled box that is pretending to be the option.
Or you could use pure javascript and have a series of boxes and adding javascript onclick events to recreate the dropbox yourself - so you will update a hidden value with whichever box was clicked using javascript.
Or use one of the non standard libraries already out there. (If there are any?)

balupton 2010-07-18 14:04:45

I've updated my post to go into the details of my proposed alternatives further. Should make for a good head start :-)

balupton 2010-07-18 16:37:29

Answer 5

A:

Why use a dropdown at all? The only way the user will see your explanatory text is by blindly hovering over one of the options.

I think it would be preferable to use a radio button group, and next to each item, put a tooltip icon indicating additional information, as well as displaying it after selection (like you currently have it).

I realize this doesn't exactly solve your problem, but I don't see the point in struggling with an html element that's notorious for its inflexibility when you could just use one that's better suited in the first place.

Chris Fletcher 2010-07-22 19:18:16

Answer 6

+2 A:

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>

pferate 2010-07-23 01:41:18

It's not viable but it does answer the question directly. Hat off!

Metalshark 2010-07-23 07:51:51

ansaurus

tags:

views:

answers:

Displaying tooltips on HTML <option> tags

related questions