Dự kiến. TB tooltip/popover tính toán vị trí của chúng dựa trên các yếu tố liên quan offsetWidth và offsetHeight. Tùy chọn không có các thuộc tính như vậy, không bao giờ có, do đó, một popover sẽ luôn luôn kết thúc trong một cái gì đó liên quan đến farmost body trái/trên cùng.
Tuy nhiên, bạn có thể đặt cửa sổ bật lên cho chính mình là select. Bind mouseover để chọn, từ đó hiển thị cửa sổ bật lên ở bên phải được điền các thuộc tính dữ liệu cho số option được di chuột.
HTML, làm sạch cho rel="popover" và "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 mouseover, thu thập tùy chọn dữ liệu attribues, show popover
$("#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');
}
});
một số ngẫu nhiên nên popover biến mất khi chúng tôi rời khỏi chọn
$("#testList").on('mouseleave', function(e) {
$('#testList').popover('destroy');
});
không nghĩ rằng nó có thể được thực hiện nhiều đặt cược ter cho danh sách tùy chọn :) Bạn có thể đấu tranh với template, buộc cửa sổ bật lên ít nhiều theo vị trí dọc cho từng tùy chọn theo chỉ mục của nó.
chia hai đang http://jsfiddle.net/mM8sx/
Cập nhật - vấn đề với IE và Chrome trên cửa sổ.
Tôi đã thấy một số tham chiếu đến câu trả lời này, chỉ ra rằng nó không hoạt động trong IE và Chrome trên các cửa sổ. Đó là do thực tế là trên cửa sổ, <option> yếu tố không nhận được sự kiện chuột nào cả. Đây là một "hack" của câu trả lời ở trên, làm cho nó "crossbrowser".
Thử nghiệm thành công với Chrome, FF, IE và Safari trên Windows. Chrome, FF và Opera trên Ubuntu. Ý tưởng là nhắm mục tiêu chính xác <option> trên mousemove (không di chuột qua) bằng cách tính chỉ mục dựa trên các mức độ ảnh clientY/chiều cao của tùy chọn.
$("#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');
}
});
thấy fiddle để biết chi tiết ->http://jsfiddle.net/LfrPs/
Điều thú vị là jsFiddle được liên kết dường như đang hoạt động ngay bây giờ. Có lẽ một phiên bản mới hơn đã sửa lỗi này? – SteveShaffer