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

Posted 2023-05-09

技术标签:

【中文标题】如何在 HTML“选项”标签上显示工具提示？【英文标题】：How can I display a tooltip on an HTML "option" tag? 【发布时间】：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 给出。只是想考虑一下:) 【参考方案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】：