MultiSelect Tooltips

by Kyle Mitofsky

HTML

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://davidstutz.github.io/bootstrap-multiselect/css/bootstrap-multiselect.css">
<script src="http://davidstutz.github.io/bootstrap-multiselect/js/bootstrap-multiselect.js"></script>
<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>

















<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;    
            background:lightgray;width:100%;'>
    About this SO Question: <a href='http://stackoverflow.com/q/25271227/1366033'>Tooltip inside bootstrap multiselect</a><br/> 
    Fork This Skeleton Here: <a href='http://jsfiddle.net/KyleMit/kcpma/'>Bootstrap 3 Skeleton</a><br/>
<div>

JavaScript

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

});

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