How to hide the bootstrap multiselect hover tooltip?
<p>I am using the bootstrap multiselect plugin provided by <a href="http://davidstutz.github.io/bootstrap-multiselect/" rel="nofollow">http://davidstutz.github.io/bootstrap-multiselect/</a>. I am facing problem with the hover over tooltip with all selected values. It displays unexpected results like in given image.<a href="http://i.stack.imgur.com/VtQ7z.jpg" rel="nofollow">tootip unexpected results</a>
I want to remove the tooltip I have also tried to disable the button title attribute whoes value is displayed in the tooltip. but it doesn't work. 
My current code is like this. <br>
<strong>Current HTML with PHP Code:</strong></p>

<pre><code>&lt;select class="form-control" multiple name="speciality[]" id="speciality"&gt;
&lt;?php if($data=$user-&gt;getAllSpecialities()){
    foreach($data as $key =&gt; $value) {?&gt;
        &lt;option selected value="&lt;?php echo $value['speciality_id'];?&gt;"&gt;
                &lt;?php echo $value['speciality_title'];?&gt; 
        &lt;/option&gt;
    &lt;?php }
 }?&gt;
&lt;/select&gt;
</code></pre>

<p><br>
<strong>Jquery with multiselect initialization:</strong><br></p>

<pre><code>$('#speciality').multiselect({
    nonSelectedText: 'Select Speciality',
    numberDisplayed: 2,
    buttonClass: 'btn btn-default',
    buttonWidth: '100%',
    includeSelectAllOption: true,
    allSelectedText:'All',              
    selectAllValue: 0,
    selectAllNumber: false,
    maxHeight: 100,
    onSelectAll: function() {
        $('button[class="multiselect"]').attr('title',false);
    }
});
//$('#speciality').tooltip().attr('title', 'all specialities');
</code></pre>