Twitter的引导Popovers和列表框选项元素工具提示在错误的地方展示(Twitter Boo

我已经建立了快速的jsfiddle来说明问题。

当使用一个工具提示或引导选择列表中的一个选项元素上酥料饼的酥料饼或者提示不显示项目旁边，而是在页面的最左上角。

我使用的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'
    });
});

我能做些什么，以使其在正确的地方显示出来？

Answer 1:

预计。 TB tooltip / popover基于所述相关联的元件，计算其位置offsetWidth和offsetHeight 。期权不具有这样的性质，从来没有，所以popover总是会在一些相对最远落得body左/顶。

但是，你可以放置在一个酥料饼的select本身。绑定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>

绑定鼠标悬停，收集选项数据attribues，显示酥料饼

$("#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 ，迫使酥料饼或多或少地遵循它的指数每个选项的垂直位置。

分叉代码http://jsfiddle.net/mM8sx/

更新 -在Windows与IE和Chrome的问题。
我已经看到了这个答案一定的参考，并指出，这是不是在IE和Chrome在Windows上工作。这是由于这样的事实，在Windows中， <option>元素犯规接收鼠标事件都没有。这里是一个“黑客”上面的回答，使之成为“跨浏览器”。

Sucesssfully使用Chrome，FF，IE和Safari在Windows上进行测试。铬，FF和Opera在Ubuntu。我们的想法是定位正确的<option>通过计算基于所述mouseevents索引上鼠标移动（未鼠标悬停） clientY / a选项的高度。

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

看到小提琴的详细信息- > http://jsfiddle.net/LfrPs/