Tooltip inside bootstrap multiselect

Question

I'm using this bootstrap multi-select. My goal is to display tooltip when there is a mouseover over the menu items.

It seems the multiselect prevent the tooltip to be displayed.

Demo in jsFiddle

HTML:

<select name="menu[]" id="menu" class="multiselect" multiple="multiple">
    <optgroup label="Items">...
        <option id='one' value='1' title="Popover one" 
                data-toggle="tooltip" data-content="content one">1</option>
        <option id='two' value='2' title="Popover two" 
                data-toggle="tooltip" data-content="content two">2</option>
    </optgroup>
</select>

JS:

$('#menu').multiselect({
    maxHeight: 400,
    numberDisplayed: 1,
    nonSelectedText: 'All',
    enableCaseInsensitiveFiltering: true,
});

$("#one").tooltip({
    placement: 'right'
});
$("#two").tooltip({
    placement: 'right'
});

How can I achieve tooltip in multiselect?

Answer 1

When you got this warning, jsFiddle wasn't joking. Github really won't work as a CDN because it delivers everything as text. Once you add the proper libraries (css and js), you'll see how Bootstrap Multiselect transforms your element.

This original markup:

<select id="menu" class="multiselect" multiple="multiple">
    <optgroup label="Items">
        <option id='one' value='1'>1</option>
        <option id='two' value='2'>2</option>
    </optgroup>
</select>

Becomes this:

<ul class="multiselect-container dropdown-menu" >
    <li class="multiselect-item filter"><!-- truncated --></li>
    <li class="multiselect-item group" ><!-- truncated --></li>

    <li><a href="javascript:void(0);">
        <label class="checkbox">
            <input type="checkbox" name="multiselect" value="1"/> 1
        </label>
    </a></li>

    <li><a href="javascript:void(0);">
        <label class="checkbox">
            <input type="checkbox" name="multiselect" value="2"/> 2
        </label>
    </a></li>

</ul>

Thus, the element #one is no longer in the picture.

So the selector for the tooltip function will have to change a little. We want to target li elements that are children of the .multiselect-container. And we also want to ignore the .filter and .group elements. Then just call tooltip and compose your title however you want.

Demo in jsFiddle

$('.multiselect-container li').not('.filter, .group').tooltip({
    placement: 'right',
    container: 'body',
    title: function () {
        // put whatever you want here
        var value = $(this).find('input').val();
        return 'Has Value of ' + value;
    }
});