列表框选项元素上的Twitter引导程序弹出窗口和工具提示显示在错误的位置

Question

我已经设置了一个快速的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'
    });
});  ?

我该怎么做才能让它出现在正确的地方？

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>??

绑定鼠标悬停,收集选项数据 - 属性,显示弹出窗口

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

一些清理,所以当我们离开选择时,popover消失

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

并不认为它可以做得更好的选项列表:)你可能会挣扎template,迫使弹出窗口或多或少遵循其索引的每个选项的垂直位置.

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

更新 - Windows上的IE和Chrome问题.
我已经看到了一些对此答案的引用,指出它在Windows上的IE和Chrome中无效.这是因为在Windows上,<option>元素根本不接收鼠标事件.这是上述答案的"黑客",使其成为"crossbrowser".

在Windows上使用Chrome,FF,IE和Safari进行了成功测试.Ubuntu上的Chrome,FF和Opera.我们的想法是<option>通过基于clientY选项的mouseevents/height 计算索引来定位鼠标移动(而不是鼠标悬停).

$("#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/