How to hide the bootstrap multiselect hover tooltip?

Question

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');

score 6 · Answer 1 · answered May 30 '17 at 17:49

6

To remove tooltip you need to override buttonTitle function in your options.

$('#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);
},
buttonTitle: function() {},
});

answered May 30 '17 at 17:49

Mohammad Teimoori

71
1
2

Thank you for this! – 11teenth Aug 22 '17 at 18:15
I think this is a better solution. Thumbs up – Hannan Ayub Jun 25 '19 at 05:49

score 2 · Accepted Answer · answered Sep 17 '16 at 09:33

2

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')

answered Sep 17 '16 at 09:33

aditya shrivastava

724
1
8
24

Dear Aditya, i have tried both solutions that you suggested but it's not working still getting the same results. – Arshad Sep 17 '16 at 09:42
are u using tool tip in that select tag or not can u show me that code – aditya shrivastava Sep 17 '16 at 10:35

score 2 · Answer 3 · edited Apr 13 '17 at 13:09

I think I found answer myself. I removed the title attribute of the button that was being displayed as tooltip. My revised code is here.
Revised JQuery Code

$('#speciality').multiselect({
    nonSelectedText: 'Select Speciality',
    numberDisplayed: 2,
    buttonClass: 'btn btn-default',
    buttonWidth: '100%',
    includeSelectAllOption: true,
    allSelectedText:'All',              
    selectAllValue: 0,
    selectAllNumber: false,
    maxHeight: 100,
    onDropdownHidden: function(event) {
         // to remove the title when dropdown is hidden so we can remove the title generated by the plugin
         $('button[class="multiselect dropdown-toggle btn btn-default"]').removeAttr("title"); 
    }
});

$('button[class="multiselect dropdown-toggle btn btn-default"]').removeAttr("title");

score 0 · Answer 4 · answered Feb 22 '19 at 10:32

In Js part this code works for me

 $('.multi-selectpicker').multiselect({
      includeSelectAllOption: true,
      enableFiltering: true,
      nonSelectedText: 'Select Groups',
      buttonTitle: function() {},
 });
 $('button[class="multiselect dropdown-toggle btn btn-default"]').removeAttr("title");

score 0 · Answer 5 · answered Aug 01 '20 at 10:36

0

$(document).on('mouseover','.multiselect ',function(){ $(this).removeAttr('title'); });

answered Aug 01 '20 at 10:36

Dilli

79
4

How to hide the bootstrap multiselect hover tooltip?

5 Answers5