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 or tooltip doesn't show next to the item, but rather in the extreme upper left of the page.

The HTML I am using is:

<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>​

The javascript call is simple:

$(function () {
    $('#testList option[rel=popover]').popover({
        placement: 'right',
        trigger: 'hover'
    });
});  ​

What can I do to make it show up in the right place?

Solution 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"

<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, 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, <option> 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 <option> 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/

Solution 2

Tried very hard to apply the same popover box to a drop-down box without luck :

1. It looks like there's no event fires at all for option elements within a drop down select.
2. The e.target of the hover event on a 'select' element will always be the select element itself ! There's no way you can get a reference to the 'option' tag that is being hovered.
3. I've also tried wrapping the text in a 'option' element into a 'span' element and try to add a 'hover' or 'mouseover' event listener to that 'span' element. This does not work either.

When change the drop down into a list, (i.e. adding size="xx" attribute ), option elements can then work as normal elements. I suspect in a drop down boxes, all options are wrapped by the browser into a separated layer. No interaction with the inner elements of a select element is allowed. Please tell me if I am wrong.