Twitter Bootstrap Popovers and Tooltips on Listbox Option Elements showing in the wrong place

Question

I have setup a quick jsFiddle to demonstrate the problem.

When using either a tooltip or a popover from Bootstrap on an option element of a select list, the popover

Answer 1

It is expected. TB tooltip / popover calculates their position based on the associated elements offsetWidth and offsetHeight. Option does not have such properties, never has, so a popover will always end up in something relative to the farmost body left/top.

However, you can place a popover for the select itself. Bind mouseover for the select, from that show a popover to the right populated with data attributes for the option being hovered.

HTML, cleaned for rel="popover" and "data-original-title"

Item 1
Item 2
Item 3
Item 4
​​

bind mouseover, collect option data-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');
    }
});

some cleanup so the popover disappears when we leave the select

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

doesnt think it can be done much better for an option list :) You could struggle with template, forcing the popover to more or less follow the vertical position for each option by its index.

forked code http://jsfiddle.net/mM8sx/

---

Update - issues with IE and Chrome on windows.
I have seen some references to this answer, pointing out that it was not working in IE and Chrome on windows. It is due to the fact that on windows, elements doesnt receive mouse events at all. Here is a "hack" of the above answer, making it "crossbrowser".

Sucesssfully tested with Chrome, FF, IE and Safari on Windows. Chrome, FF and Opera on Ubuntu. The idea is to target the correct on mousemove (not mouseover) by calculating the index based on the mouseevents clientY / height of a option.

$("#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');
    }
});

see fiddle for details -> http://jsfiddle.net/LfrPs/