Question

我想在禁用鼠标时显示工具提示消息复选框，但我无法显示工具提示消息。

var sClass = 'chbx_'+ sAssesItemID;
if("0" == objItemSummary.skipStandard && $('.'+ sClass + ':checked').length == 1){
    if(!o.checked){
        $('#tdStandard'+ sAssesItemID +'___ > input.'+sClass+'').each(function(i, n){
            if($(this).is(':checked')){
                //  $(this).attr('disabled', 'disabled').css('cursor','pointer').attr('title', 'At least one standard must be selected for each item.'); // Added css Message as per task "IB Setup Summary Tab Remove Warning Message" since V4.1.0 By Mahananda
                $(this).attr('disabled', 'disabled');
                $(this).addClass('enable-tooltip');
                $(this).attr('data-original-title','At least one standard must be selected for each item.').data('toggle', 'tooltip').data('trigger', 'hover').data('placement', 'right').data('html', 'true').data('toggle','model');
                $(this).data('toggle', 'tooltip').data('trigger', 'hover').data('placement', 'right').data('html', 'true').data('toggle','model');
                $('.enable-tooltip').tooltip();
            }
        });
    }else $('#' + o.id).attr('disabled', 'disabled');
}else { 
    $('.'+ sClass).removeAttr('disabled');
    $('.'+ sClass).removeAttr('data-original-title');
}

Answer 1

您可以包装已禁用的按钮并将工具提示放在包装器上：

请查看以下工作片段。

$(function() {
    $('.tooltip-wrapper').tooltip();
});

.tooltip-wrapper {
  display: inline-block; /* display: block works as well */
  margin: 50px; /* make some space so the tooltip is visible */
}

.tooltip-wrapper input[disabled] {
  /* don't let button block mouse events from reaching wrapper */
  pointer-events: none;
}

.tooltip-wrapper.disabled {
  /* OPTIONAL pointer-events setting above blocks cursor setting, so set it here */
  cursor: not-allowed;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="tooltip-wrapper disabled" title="Hey dude!!!!">
<input type="checkbox" disabled/>
</div>

jquery工具提示不能用于禁用复选框

1 个答案: