twitter-bootstrap 列表框选项元素上的 Twitter Bootstrap 弹出窗口和工具提示显示在错误的位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13126144/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap Popovers and Tooltips on Listbox Option Elements showing in the wrong place
提问by Brian McCord
I have setup a quick jsFiddleto demonstrate the problem.
我已经设置了一个快速的jsFiddle来演示这个问题。
When using either a tooltip or a popover from Bootstrap on an option element of a select list, the popover or tooltip doesn't show next to the item, but rather in the extreme upper left of the page.
在选择列表的选项元素上使用 Bootstrap 的工具提示或弹出框时，弹出框或工具提示不会显示在项目旁边，而是显示在页面的最左上角。
The HTML I am using is:
我使用的 HTML 是：
<select size="5" id="testList">
<option value="1" rel="popover" data-original-title="This is item 1." data-content="Lots of stuff to say" style="color: red; ">Item 1</option>
<option value="2" rel="popover" data-original-title="This is item 2." data-content="Lots of stuff to say" style="color: green; ">Item 2</option>
<option value="3" rel="popover" data-original-title="This is item 3." data-content="Lots of stuff to say" style="">Item 3</option>
<option value="4" rel="popover" data-original-title="Blah" data-content="Lots of stuff to say" style="color: orange; ">Item 4</option>
</select>?
The javascript call is simple:
javascript 调用很简单：
$(function () {
$('#testList option[rel=popover]').popover({
placement: 'right',
trigger: 'hover'
});
}); ?
What can I do to make it show up in the right place?
我该怎么做才能让它出现在正确的位置？
回答by davidkonrad
It is expected. TB tooltip/ popovercalculates their position based on the associated elements offsetWidthand offsetHeight. Option does not have such properties, never has, so a popoverwill always end up in something relative to the farmost bodyleft/top.
这是预期的。TB tooltip/popover根据相关元素offsetWidth和计算它们的位置offsetHeight。Option 没有这样的属性，从来没有，所以 apopover总是会以相对于最body左边/顶部的东西结束。
However, you can place a popover for the selectitself. Bind mouseoverfor the select, from that show a popover to the right populated with data attributes for the optionbeing hovered.
但是，您可以为其select本身放置一个弹出框。绑定mouseover选择，从中显示一个弹出框到右侧填充了option被悬停的数据属性。
HTML, cleaned for rel="popover"and "data-original-title"
HTML，清理rel="popover"和"data-original-title"
<select size="4" id="testList">
<option value="1" data-title="This is item 1." data-content="Lots of stuff to say 1" style="color:red;">Item 1</option>
<option value="2" data-title="This is item 2." data-content="Lots of stuff to say 2" style="color:green;">Item 2</option>
<option value="3" data-title="This is item 3." data-content="Lots of stuff to say 3" style="">Item 3</option>
<option value="4" data-title="Blah" data-content="Lots of stuff to say 4" style="color:orange;">Item 4</option>
</select>??
bind mouseover, collect option data-attribues, show popover
绑定鼠标悬停，收集选项数据属性，显示弹出框
$("#testList").on('mouseover', function(e) {
var $e = $(e.target);
if ($e.is('option')) {
$('#testList').popover('destroy');
$("#testList").popover({
trigger: 'manual',
placement: 'right',
title: $e.attr("data-title"),
content: $e.attr("data-content")
}).popover('show');
}
});
some cleanup so the popover disappears when we leave the select
一些清理所以当我们离开选择时弹出窗口消失
$("#testList").on('mouseleave', function(e) {
$('#testList').popover('destroy');
});
doesnt think it can be done much better for an option list :) You couldstruggle with template, forcing the popover to more or less follow the vertical position for each option by its index.
犯规认为它可以更好地做了一个选项列表:)你可以挣扎template，迫使酥料饼或多或少地遵循它的指数每个选项的垂直位置。
forked code http://jsfiddle.net/mM8sx/
分叉代码http://jsfiddle.net/mM8sx/
Update- issues with IE and Chrome on windows.
I have seen some references to this answer, pointing out that it was not working in IE and Chrome on windows. It is due to the fact that on windows, <option>elements doesnt receive mouse events at all. Here is a "hack" of the above answer, making it "crossbrowser".
更新- Windows 上的 IE 和 Chrome 问题。
我已经看到了对这个答案的一些参考，指出它在 Windows 上的 IE 和 Chrome 中不起作用。这是因为在 Windows 上，<option>元素根本不接收鼠标事件。这是上述答案的“黑客”，使其成为“跨浏览器”。
Sucesssfully tested with Chrome, FF, IE and Safari on Windows. Chrome, FF and Opera on Ubuntu. The idea is to target the correct <option>on mousemove (not mouseover) by calculating the index based on the mouseevents clientY/ height of a option.
在 Windows 上使用 Chrome、FF、IE 和 Safari 成功测试。Ubuntu 上的 Chrome、FF 和 Opera。这个想法是<option>通过根据clientY选项的鼠标事件/高度计算索引来定位鼠标移动（而不是鼠标悬停）的正确性。
$("#testList").on('mousemove', function(e) {
if (!isWindows) {
var $e = $(e.target);
} else {
var newIndex = Math.floor(e.clientY/optionHeight);
if (newIndex === index) return;
index = newIndex;
$e = $(this).find('option:eq('+index+')');
}
if ($e.is('option')) {
$('#testList').popover('destroy');
$("#testList").popover({
trigger: 'manual',
placement: 'right',
title: $e.attr("data-title"),
content: $e.attr("data-content")
}).popover('show');
}
});
see fiddle for details -> http://jsfiddle.net/LfrPs/
有关详细信息，请参阅小提琴 - > http://jsfiddle.net/LfrPs/
回答by David Lin
Tried very hard to apply the same popover box to a drop-down box without luck :
非常努力地将相同的弹出框应用于下拉框而没有运气：
- It looks like there's no event fires at all for option elements within a drop down select.
- The e.target of the hover event on a 'select' element will always be the select element itself ! There's no way you can get a reference to the 'option' tag that is being hovered.
- I've also tried wrapping the text in a 'option' element into a 'span' element and try to add a 'hover' or 'mouseover' event listener to that 'span' element. This does not work either.
- 看起来下拉选择中的选项元素根本没有触发事件。
- 'select' 元素上的悬停事件的 e.target 将始终是 select 元素本身！您无法获得对悬停的“选项”标签的引用。
- 我还尝试将“option”元素中的文本包装到“span”元素中，并尝试向该“span”元素添加“hover”或“mouseover”事件侦听器。这也不起作用。
When change the drop down into a list, (i.e. adding size="xx" attribute ), option elements can then work as normal elements. I suspect in a drop down boxes, all options are wrapped by the browser into a separated layer. No interaction with the inner elements of a select element is allowed. Please tell me if I am wrong.
当将下拉列表更改为列表时（即添加 size="xx" 属性），选项元素可以作为普通元素工作。我怀疑在下拉框中，所有选项都被浏览器包装到一个单独的层中。不允许与选择元素的内部元素进行交互。如果我错了，请告诉我。
