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');
    }
});

进行一些清理，以便在我们离开选择

时弹出消失

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

并不认为可以为选项列表做得更好:)你可以与template斗争，迫使popover或多或少地跟随每个选项的垂直位置索引。

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

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

在Windows上使用Chrome，FF，IE和Safari进行了成功测试。 Ubuntu上的Chrome，FF和Opera。我们的想法是通过基于mouseevents <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');
    }
});

详情请见小提琴 - ＆gt;的 http://jsfiddle.net/LfrPs/

Answer 2

非常难以将相同的弹出框应用于下拉框而没有运气：

看起来下拉选项中的选项元素根本没有事件触发。
'select'元素上的悬停事件的e.target将始终是select元素本身！你无法获得对正在徘徊的'option'标签的引用。
我还尝试将'option'元素中的文本包装成'span'元素，并尝试向'span'元素添加'hover'或'mouseover'事件监听器。这也不起作用。

当将下拉列表更改为列表时（即添加size =“xx”属性），选项元素可以作为普通元素工作。我怀疑在一个下拉框中，所有选项都被浏览器包装成一个分离的层。不允许与select元素的内部元素进行交互。如果我错了，请告诉我。

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

2 个答案: