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

76

使用纯HTML或jQuery辅助的JavaScript，如何在单个<option>元素上显示工具提示以辅助决策过程（没有足够的空间容纳其他类型的控件，并且需要一些帮助）。

可以通过插件或类似工具来完成此操作吗？

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

该解决方案应：

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

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

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

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

jquery  html  jquery-plugins  tooltip 
— 金属鲨
source
除了这个问题，我不理解下面这些答案的所有这些…………
— Sinan
反对票是我认为没有用的答案。因此，被告知是不可能的，用只能在一种浏览器中使用的解决方案或使用在页面上跳转的GUI工具箱（不能像选择框那样操作）进行回答都无济于事。而在不同浏览器上测试的事件模型中演示了事件模型。
— Metalshark
从本网站的常见问题解答中：Be nice。以您希望他们对待您的方式尊重他人。Be honest。如果您看到错误的信息，请将其否决。对我来说：如果您认为这些答案不是错误的，如果您认为它们没有用处，那么我不会在这些答案上看到任何错误信息，只需评论一下它们为什么没有用即可。
— 思南
谨在此道歉，并以个人名义作为工具提示。如果我现在可以将它们取回，则（每个）-如果主持人可以/将要这样做，那么请。
— Metalshark
您基本上是在寻找一个下拉插件，该插件title将option元素的属性复制到生成的<li>or<a>元素中。没有人想到，因此您想修改现有的或重新发明一个。很抱歉没有发布答案，因为balupton基本上已经给出了答案。只是想提出一个想法:)
— BalusC 2010年

Answers:

107

自问这两年以来，其他浏览器似乎已经流行起来（至少在Windows上……不确定其他浏览器）。您可以在选项标签上设置“ title”属性：

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

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

— 杰克·R·阿比特
source
在Opera中，它似乎仅在非下拉选择框中起作用。
— Bergi
1
使用Safari版本10.0.2（12602.3.12.0.1）
— LoKat
在Linux机器中完成Firefox v52x的工作
— MarcoZen
11

如果增加了可见选项的数量，那么以下方法可能适用于您：

<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>
— 适当的
source
1
这不可行，但确实可以直接回答问题。脱帽致敬！
— Metalshark，2010年
2
当我从选择标记中删除size =“ 10”时，它不起作用！jsfiddle.net/7xbwemzL
— kudlatiger 2015年
4

我只是尝试在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事件以自己重新创建保管箱-因此，无论使用javascript单击哪个框，您都将更新隐藏值。
  • 或者使用已经存在的非标准库之一。（如果有的话？）
— Balupton
source
我已经更新了帖子，以进一步探讨提议的替代方案的详细信息。应该有个不错的开端：-)
— balupton 2010年
3

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

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

— 兹巴特森
source
同意-我已经在使用title =“”，但不幸的是，WebKit落在了后面。
— Metalshark，2010年
3

我认为不可能在所有浏览器中都可以做到。

W3Schools报告所有浏览器中都存在选项事件，但是在设置了此测试演示之后。我只能让它在Firefox（而不是Chrome或IE）上运行，但尚未在其他浏览器上进行过测试。

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

更新：老实说，通过查看您提供的示例代码，我什至不使用选择框。我认为使用滑块会更好。我已经更新了您的演示。我必须对您的分级对象（添加级别编号）和safesurf选项卡进行一些细微更改。但是我几乎保留了其他所有东西。

— 莫蒂
source
1
我已经更新了答案……这是个人观点，但也许对您来说是一个更好的选择。
— 莫蒂
啊哈，是的，滑块似乎是一个更好的选择。问题仍然存在，但可能会在最终代码中使用。
— Metalshark
2

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

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

我意识到这并不能完全解决您的问题，但是当您只想使用最适合的html元素时，我看不到它因其灵活性而臭名昭著。

— 克里斯·弗莱彻
source
1

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

我建议使用的是这种方式。

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

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

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

— 思南
source
这里平坦的下拉菜单会导致浏览器窗口像疯子一样跳来跳去-也可以通过不使用＆lt; select＆gt; 标记在移动浏览器上变得奇怪。
— Metalshark
1
那只是我建议的想法，不是在该链接上采用现成的解决方案。一个ul支持在任何浏览器无序列表，剩下的只是显示和隐藏li物品。我仍然相信这应该是要走的路。
— 思南
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.