如何隐藏bootstrap multiselect悬停工具提示?

时间:2016-09-17 08:50:36

标签: jquery css bootstrap-multiselect

我正在使用http://davidstutz.github.io/bootstrap-multiselect/提供的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 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');

5 个答案:

答案 0 :(得分:4)

要删除工具提示,您需要在选项中覆盖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() {},
});

答案 1 :(得分:1)

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

if ($this->input->post('submit')) {
foreach($all_id as $row_id)
{
     if($this->input->post('id_overview'.$row_id))
     {
           //do action where id is present
     }
     else
     {
            //do action if unchecked   by getting id $row_id
     }
}
}

删除工具提示使用此代码

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

答案 2 :(得分:1)

我想我找到了答案。我删除了显示为工具提示的按钮的title属性。我修改后的代码在这里。
修订的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"); 

答案 3 :(得分:0)

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

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

答案 4 :(得分:0)

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