6

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

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

4

2 回答 2

16

这是预期的。TB tooltip/popover根据相关元素计算它们的位置offsetWidth和offsetHeight。Option 没有这样的属性，从来没有，所以 apopover总是会以相对于最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困难，迫使弹出窗口或多或少地通过其索引跟随每个选项的垂直位置。

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

更新- Windows 上的 IE 和 Chrome 问题。
我看到了一些对此答案的引用，指出它在 Windows 上的 IE 和 Chrome 中不起作用。这是因为在 Windows 上，<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');
    }
});

有关详细信息，请参见小提琴 -> http://jsfiddle.net/LfrPs/

于 2012-10-29T21:03:22.480 回答
2

非常努力地将相同的弹出框应用于下拉框，但没有运气：

  1. 看起来下拉选择中的选项元素根本没有触发事件。
  2. 'select' 元素上的悬停事件的 e.target 将始终是选择元素本身！您无法获得对悬停的“选项”标签的引用。
  3. 我还尝试将“option”元素中的文本包装到“span”元素中，并尝试向该“span”元素添加“hover”或“mouseover”事件侦听器。这也不起作用。

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

于 2013-06-14T07:34:40.100 回答