jquery tooltip is not working on disabled checkbox

Question

I want to show a tool-tip message on mouse over on disabled check box, but i am not able show the tool-tip message.

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

I think that a disabled input won't ever register with jQuery, so you will need to fake it. Disabled inputs by the w3 spec are inactive, unusable, unclickable and I imagine unhoverable. — Djave
– Djave, Commented Dec 22, 2016 at 12:08

Rahul Patel · Accepted Answer · 2016-12-22 12:18:23Z

5

You can wrap the disabled button and put the tooltip on the wrapper:

Please check below working snippet.

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

edited Dec 22, 2016 at 12:18

answered Dec 22, 2016 at 12:12

Rahul Patel

5,2342 gold badges16 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

14 Comments

MJR Over a year ago

i checked above code, it showing tool-tip message but not disabling checkbox.

Rahul Patel Over a year ago

You can disable checkbox by passing disabled property in checkbox as I have done in snippet.

MJR Over a year ago

yes i done like this $(this).addClass('disabled'); by replacing $(this).attr('disabled', 'disabled');

MJR Over a year ago

in default method i m calling like this

MJR Over a year ago

var sdisabled = (((1 == arrStdIDs.length || (1 == arrCheckedStdIDs.length && 'checked' == sChecked)) && ("0" == objItemSummary.skipStandard))) ? 'disabled' : '';, this sdisabled i will pass in my html

|

Collectives™ on Stack Overflow

jquery tooltip is not working on disabled checkbox

1 Answer 1

14 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

14 Comments

Your Answer

Sign up or log in

Post as a guest

Related