Search code examples
jquerycssbootstrap-multiselect

How to hide the bootstrap multiselect hover tooltip?


I am using the bootstrap multiselect plugin provided by http://davidstutz.github.io/bootstrap-multiselect/. I am facing problem with the hover over tooltip with all selected values. It displays unexpected results like in given image.tootip unexpected results 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.
Current HTML with PHP Code:

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


Jquery with multiselect initialization:

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

Solution

  • If I understood yor question properly then your willing to remove the tool tip then try this

    <select class="form-control" data-toggle="tooltip" data-placement="left" title="Tooltip on left" multiple name="speciality[]" id="speciality">
    <?php if($data=$user->getAllSpecialities()){
    foreach($data as $key => $value) {?>
        =<option selected value="<?php echo $value['speciality_id'];?>">
                <?php echo $value['speciality_title'];?> 
        </option>
    <?php } }?></select>
    

    to remove tooltip use this code`

    $('#speciality').tooltip('hide')
    

    Or

    $('#speciality').tooltip('destroy')