如何隐藏引导多选悬停工具提示？答案

【问题标题】：How to hide the bootstrap multiselect hover tooltip?如何隐藏引导多选悬停工具提示？
【发布时间】：2020-08-01 18:36:57
【问题描述】：

我正在使用http://davidstutz.github.io/bootstrap-multiselect/ 提供的引导多选插件。我遇到了将所有选定值悬停在工具提示上的问题。它会显示给定图像中的意外结果。tootip unexpected results 我想删除工具提示我还尝试禁用按钮标题属性，其值显示在工具提示中。但它不起作用。我现在的代码是这样的。
带有 PHP 代码的当前 HTML：

<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：

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

【问题讨论】：

标签： jquery css bootstrap-multiselect

【解决方案1】：

要删除工具提示，您需要在选项中覆盖 buttonTitle 函数。

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

【讨论】：

谢谢！
我认为这是一个更好的解决方案。竖起大拇指

【解决方案2】：

如果我正确理解了你的问题，那么你愿意删除工具提示然后试试这个

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

要删除工具提示，请使用此代码`

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

或者

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

【讨论】：

亲爱的 Aditya，我已经尝试了您建议的两种解决方案，但仍然无法获得相同的结果。
你是否在那个选择标签中使用了工具提示，你能告诉我那个代码

【解决方案3】：

我想我自己找到了答案。我删除了显示为工具提示的按钮的标题属性。我修改后的代码在这里。
修改后的 JQuery 代码

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

【讨论】：

【解决方案4】：

在 Js 部分这段代码对我有用

$('.multi-selectpicker').multiselect({ 包括选择所有选项：真，启用过滤：真， nonSelectedText: '选择组', 按钮标题：函数（）{}， }); $('button[class="multiselect dropdown-toggle btn btn-default"]').removeAttr("title");

【讨论】：

【解决方案5】：

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

【讨论】：