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

【问题标题】：How can I display a tooltip on an HTML "option" tag?如何在 HTML“选项”标签上显示工具提示？
【发布时间】：2011-03-16 01:02:02
【问题描述】：

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

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

我尝试了几个用于 jQuery 的工具提示插件，但都没有成功（包括一个叫做 Tooltip 的插件）。

这个解决方案应该：

在 IE、WebKit 和 Gecko 中工作；
使用标准 <select> 包装的 <option> 元素。

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

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

意识到这并不容易，并且可能需要创建一些东西 - 因此赏金将授予最完整的解决方案或使我最接近我可以创建的解决方案的特定钩子。强>

【问题讨论】：

除了这个问题，我不明白所有这些对以下答案的反对意见......
反对票是针对我认为没有用的答案。因此被告知这是不可能的，使用仅在一个浏览器中工作的解决方案或使用在页面周围跳转的 GUI 工具包（不像选择框那样操作）来回答没有帮助。而在不同浏览器上测试的东西中展示了事件模型。
来自本网站的常见问题解答：Be nice。以你希望他们对待你的同样尊重对待他人。 Be honest。如果您看到错误信息，请投反对票。来自我：我没有看到关于这些答案的任何错误信息，如果您认为它们没有用，只要它们不是错误的，只需发表评论为什么它们没有用。
谦虚的道歉，在个人层面上将工具提示视为表面价值。如果我现在可以将它们收回，我会（对于每个）-如果版主可以/将这样做，那么请。
您基本上是在寻找一个下拉插件，它将选项元素的title 属性复制到生成的<li> 或<a> 元素中。没有人想到，所以你想修改一个现有的或重新发明一个。很抱歉没有发布作为答案，因为这基本上已经由 balupton 给出。只是想考虑一下:)

标签： jquery html jquery-plugins tooltip

【解决方案1】：

似乎在被问到这个问题的 2 年内，其他浏览器已经赶上了（至少在 Windows 上……不确定其他浏览器）。您可以在选项标签上设置“标题”属性：

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

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

【讨论】：

在 Opera 中，它似乎只适用于非下拉选择框。
使用 Safari 版本 10.0.2 (12602.3.12.0.1)
不适用于 Linux 机器中的 Firefox v52x

【解决方案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>

【讨论】：

这是不可行的，但它确实直接回答了这个问题。脱帽致敬！
当我从选择标签中删除 size="10" 时它不起作用！ jsfiddle.net/7xbwemzL

【解决方案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 单击的框更新隐藏值。
或者使用已经存在的非标准库之一。（如果有的话？）

【讨论】：

我已经更新了我的帖子，以进一步详细介绍我提出的替代方案。应该是一个良好的开端:-)

【解决方案4】：

至少在firefox上，你可以在option标签上设置一个“title”属性：

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

【讨论】：

同意 - 我已经在使用 title="" 不幸的是 WebKit 它被淘汰了。

【解决方案5】：

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

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

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

更新：老实说，通过查看您提供的示例代码，我什至不会使用选择框。我认为使用slider 会更好看。我有updated your demo。我不得不对您的评级对象（添加级别编号）和安全冲浪选项卡进行一些小改动。但我几乎完好无损地保留了其他所有东西。

【讨论】：

我已经更新了我的答案......这是个人意见，但对你来说可能是一个更好的选择。
啊哈，是的，滑块似乎是一个更好的选择。这个问题仍然存在，但可能会在最终代码中使用。

【解决方案6】：

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

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

我意识到这并不能完全解决您的问题，但是当您可以只使用一开始就更适合的一个 html 元素时，我认为与一个因不灵活而臭名昭著的 html 元素作斗争没有意义。

【讨论】：

11 年后，你的想法还是有道理的。但我正在设置一个没有单选按钮的 Dat GUI。您可以将复选框伪装成单选按钮，但我觉得它太老套了。因此，在选择选项上显示工具提示仍然是 IMO 的更好方法。

【解决方案7】：

我不相信您可以使用标准 <select> 元素来实现此功能。

我建议使用这种方式。

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

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

希望这会有所帮助，思南。

【讨论】：

这里的扁平下拉菜单会导致浏览器窗口像疯子一样跳来跳去 - 也是因为不使用 <select>标签在移动浏览器上很奇怪。
这只是我建议的想法，即不在该链接上采用现成的解决方案。任何浏览器都支持ul 无序列表，其余的只是显示和隐藏li 项目。我仍然相信这应该是要走的路。