Question

使用纯HTML或jQuery辅助JavaScript，如何在各个<option>元素上显示工具提示以帮助决策过程（没有足够的空间进行不同类型的控制，并且一些帮助将是需要）。

这可以通过插件或类似方式完成吗？

我为jQuery尝试了一些工具提示插件但没有成功（包括名为Tooltip的插件）。

此解决方案应该：

在IE，WebKit以及Gecko工作;
使用标准<select>包裹的<option>元素。

因此，如果解决方案想要使用其他标签，它应该将这些元素动态转换为所需的元素（并且不要指望初始标记有任何不同）。

可以找到here的代码，它位于SafeSurf部分下，我希望在选项翻转时显示一些有关选项含义的帮助。目前它只能在“事后”显示，并且对用户的一些前期帮助将是有益的。

感谢这并不容易，而且可能需要创建一些东西 - 所以赏金将被授予最完整的解决方案或最接近我能够创建的解决方案的特定钩子。

Answer 1

似乎在被问到这两年后，其他浏览器已经赶上（至少在Windows上......不确定其他浏览器）。您可以在选项标签上设置“title”属性：

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

这适用于Windows 7上的Chrome 20，IE 9（及其8＆amp; 7模式），Firefox 3.6，RockMelt 16（基于Chromium）

Answer 2

如果增加可见选项的数量，则以下内容可能对您有用：

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

Answer 3

我刚尝试在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点击任何一个框来更新隐藏值。
或者使用其中一个非标准库。（如果有？）

Answer 4

至少在firefox上，你可以在选项标签上设置“title”属性：

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

Answer 5

我不认为这可以跨所有浏览器进行。

W3Schools报告所有浏览器中都存在option events，但在设置this test demo之后。我只能让它适用于Firefox（不是Chrome或IE），我还没有在其他浏览器上测试它。

Firefox还允许使用mouseenter和mouseleave，但这不会在w3schools页面上报告。

更新：老实说，通过查看您提供的示例代码，我甚至不会使用选择框。我认为使用slider会更好看。我updated your demo。我必须对您的评级对象（添加级别编号）和safesurf选项卡进行一些小的更改。但我几乎完整地留下了其他一切。

Answer 6

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

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

我意识到这并没有完全解决你的问题，但是我没有看到挣扎于一个html元素的问题，因为它只是在你能够使用一个更适合的第一个地方时因其缺乏灵活性而臭名昭着。

Answer 7

我认为您无法使用标准<select>元素实现此功能。

我建议使用这种方式。

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

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

希望这有帮助，思南。

如何在HTML“选项”标签上显示工具提示？

7 个答案: