我已经设置了一个快速 jsFiddle来证明问题。

当在选择列表的选项元素上使用 Bootstrap 的工具提示或弹出窗口时，弹出窗口或工具提示不会显示在项目旁边，而是显示在页面的最左上角。

我使用的 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>​

javascript 调用很简单:

$(function () {
    $('#testList option[rel=popover]').popover({
        placement: 'right',
        trigger: 'hover'
    });
});  ​

我该怎么做才能让它显示在正确的位置？

最佳答案

这是预期的。结核病 tooltip/popover根据关联元素计算它们的位置 offsetWidth和 offsetHeight .选项没有这样的属性，从来没有，所以 popover总是会以相对于最远的东西结束 body左/上。

但是，您可以为 select 放置一个弹出框本身。绑定(bind)mouseover对于选择，从中显示右侧的弹出窗口填充了 option 的数据属性被盘旋。

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)鼠标悬停，收集选项数据属性，显示弹出框

$("#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');
    }
});

进行一些清理，以便在我们离开选择时弹出窗口消失

$("#testList").on('mouseleave', function(e) {
    $('#testList').popover('destroy');
});

不认为选项列表可以做得更好 :) 您可能与template 斗争，强制弹出窗口或多或少地按照其索引跟随每个选项的垂直位置。

fork 代码 http://jsfiddle.net/mM8sx/

更新 - Windows 上的 IE 和 Chrome 问题。
我看到了一些对这个答案的引用，指出它在 Windows 上的 IE 和 Chrome 中不起作用。这是因为在 Windows 上，<option>元素根本不接收鼠标事件。这是上述答案的“破解”，使其成为“跨浏览器”。

在 Windows 上成功地使用 Chrome、FF、IE 和 Safari 进行了测试。 Ubuntu 上的 Chrome、FF 和 Opera。这个想法是针对正确的 <option>通过基于鼠标事件计算索引在 mousemove(不是鼠标悬停)上 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');
    }
});

有关详细信息，请参阅 fiddle -> http://jsfiddle.net/LfrPs/

关于javascript - 列表框选项元素上的 Twitter Bootstrap 弹出窗口和工具提示显示在错误的位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13126144/