È previsto. TB tooltip/popover calcola la loro posizione in base agli elementi associati offsetWidth e offsetHeight. L'opzione non ha tali proprietà, mai, quindi un popover finirà sempre in qualcosa relativo al farmost body a sinistra/in alto.
Tuttavia, è possibile inserire un popover per il select sé. Bind mouseover per la selezione, da quello mostra un popover sulla destra popolato con gli attributi dei dati per lo option al passaggio del mouse.
HTML, pulito per rel="popover" e "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>
legano passaggio del mouse, raccolgono opzione data-attribues, spettacolo 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');
}
});
po 'di pulizia in modo che il popover scompare quando si lascia la select
$("#testList").on('mouseleave', function(e) {
$('#testList').popover('destroy');
});
non pensa che si possa fare molto scommessa ter per un elenco di opzioni :) è in conflitto con template, costringendo il popover a seguire più o meno la posizione verticale di ciascuna opzione in base all'indice.
biforcuta codice http://jsfiddle.net/mM8sx/
Aggiornamento - problemi con IE e Chrome su Windows.
Ho visto alcuni riferimenti a questa risposta, sottolineando che non funzionava in IE e Chrome su Windows. È dovuto al fatto che su Windows, gli elementi <option> non ricevono affatto eventi del mouse. Ecco un "trucco" della risposta di cui sopra, che lo rende "crossbrowser".
Testato con successo con Chrome, FF, IE e Safari su Windows. Chrome, FF e Opera su Ubuntu. L'idea è di indirizzare il corretto <option> su mousemove (non il mouseover) calcolando l'indice in base agli effetti del mouse clientY/height di un'opzione.
$("#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');
}
});
vedere violino per i dettagli ->http://jsfiddle.net/LfrPs/
È interessante notare che il collegamento jsFiddle sembra funzionare ora. Forse una versione più recente ha risolto questo? – SteveShaffer