如何在HTML“选项”标记上显示工具提示?

自从被问到这一点后的两年里,其他浏览器似乎已经赶上了(至少在Windows上是这样)。不确定其他人)。您可以在选项标记上设置“标题”属性:

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

这在Chrome20、IE 9(及其8&7模式)、Firefox 3.6、Rockmelt 16(基于Chromium)中都可以使用,所有这些都在Windows7上使用。

如果增加可见选项的数量可用,则可以使用以下选项:

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

我刚在Chrome上尝试过:

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

但是,悬停进入永远不会开火…所以您根本无法使用标准选择来完成这项工作。您可以通过一些非标准的方法来实现这一点:

• 您可以使用看起来像下拉列表的单选框来伪造选择框。例如,将一个无线框绝对定位,并将不透明度设置为0,放置在假装是选项的样式框上。
• 或者,您可以使用纯javascript并拥有一系列框,然后添加javascript onclick事件来自己重新创建Dropbox,这样您就可以用使用javascript单击的框更新隐藏值。
• 或者使用一个已经存在的非标准库。(如果有?)

至少在Firefox上,您可以在选项标签上设置“title”属性:

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

我认为这不可能在所有浏览器中实现。

W3学校报告说 option events 存在于所有浏览器中,但在设置之后 this test demo . 我只能让它在Firefox(而不是Chrome或IE)上工作,我还没有在其他浏览器上测试过它。

firefox也允许mouseenter和mouseleave,但w3schools页面上没有报告。

更新:老实说,从您提供的示例代码来看,我甚至不会使用选择框。我想用一个 slider . 我已经 updated your demo . 我不得不对你的评级对象(添加一个级别号)和safesurf选项卡做一些小改动。但其他的东西我都完好无损。

为什么要使用下拉列表?用户看到解释性文本的唯一方法是盲目地将鼠标悬停在其中一个选项上。

我认为最好使用一个单选按钮组,在每个项目旁边放置一个工具提示图标,指示附加信息,并在选择后显示它(就像您当前拥有的那样)。

我意识到这并不能完全解决你的问题,但是我不认为在与一个以其不灵活而臭名昭著的HTML元素作斗争时有什么意义,因为你可以首先使用一个更适合的元素。

我不相信你能用标准来实现这个功能 <select> 元素。

我建议用这种方法。

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

它的基本版本不会占用太多空间,您可以轻松地绑定 mouseover 事件到子项以显示一个不错的工具提示。

希望这有帮助,西南。