To jest oczekiwane. TB tooltip/popover oblicza ich pozycję na podstawie powiązanych elementów offsetWidth i offsetHeight. Opcja nie ma takich właściwości, nigdy nie ma, więc popover zawsze kończy się na czymś w stosunku do gospodarstwa domowego body w lewo/górę.
Jednak można dodać popover dla dla samego . Bind mouseover dla zaznaczenia, z tego pokazuje popover w prawo wypełniony atrybutami danych dla ukrycia się option.
HTML, czyszczone rel="popover" i "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>
wiążą mouseover, zbierać opcji danych-attribues, pokaż 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');
}
});
niektóre porządki więc popover znika, gdy wyjeżdżamy select
$("#testList").on('mouseleave', function(e) {
$('#testList').popover('destroy');
});
Nie sądzę, że można zrobić wiele zakładów ter dla listy opcji :) Ty może walczyć z template, zmuszając popover do mniej więcej podążać za pozycją pionową dla każdej opcji przez jej indeks.
rozwidlony kod http://jsfiddle.net/mM8sx/
Aktualizacja - problemy z IE i Chrome na oknach.
Widziałem kilka odniesień do tej odpowiedzi, wskazując, że nie działało w IE i Chrome w systemie Windows. Wynika to z faktu, że w przypadku okien, elementy <option> nie otrzymują wcale zdarzeń myszy. Oto "hack" powyższej odpowiedzi, co czyni go "crossbrowser".
Testy zakończone pomyślnie z Chrome, FF, IE i Safari w systemie Windows. Chrome, FF i Opera w systemie Ubuntu. Chodzi o to, aby celować w prawidłową kamerę <option> przy użyciu myszy (nie po najechaniu kursorem myszy), obliczając indeks na podstawie wartości myszy mouseevents clientY/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');
}
});
zobaczyć skrzypce na szczegóły ->http://jsfiddle.net/LfrPs/
Co ciekawe, połączenie jsFiddle prawdopodobnie działa. Być może nowsza wersja naprawiła to? – SteveShaffer