Can I run a .hover that shows a tooltip in a disabled checkbox?

Question

I have a dynamic form and I need that a group of checkboxes show a tooltip when mouse hover.

I was looking for a clean tooltip code just using jquery and I found css resources that could resolve my problem.

How can I display a tooltip message on hover using jQuery?

Here, I have chosen the code from the answer of @being_ethereal for the tooltip, but it doesnt work with an specific configuration.

$('.geraBloqueio').hover(function(){
    $(this).css('cursor','pointer').attr('title', 'Esta resposta gera bloqueio?');
}, function() {
    $(this).css('cursor','auto');
});

It needs to interact with some appended HTML, after a button click.

function myfunction(){
    $('#cont').append('<input class="geraBloqueio" type="checkbox" disabled />');
}

What am I doing wrong?

`disabled` elements raise and receive no events, so what you're trying to do is not possible in this manner — Rory McCrossan, Aug 16 '19 at 12:54

score 1 · Accepted Answer · edited Aug 16 '19 at 13:16

1

firstly as @RoryMcCrossan said, you cant hover a disabled input...

And secondly even if you appended not disabled input, you would have problem with triggering that function. would be better to

$(body).on("mouseenter", ".geraBloqueio", function (){} );

so put that listener on body not on new elements that you are creating.

Anyway you need to do something with that input... Wrap it in a label and then put that title on the label.. that should work fine.

edited Aug 16 '19 at 13:16

Lee Taylor

7,761
16
33
49

answered Aug 16 '19 at 13:00

Every Screamer

520
2
7

I used the label for it! Thanks for your answer! – mapgiordani Aug 16 '19 at 13:45

score 1 · Answer 2 · answered Aug 16 '19 at 13:00

$(function() {
  $('#cont').append('<input type="checkbox" disabled />');
  $('#cont').tooltip();
  $('#cont').hover(function() {
    $(this).css('cursor', 'not-allowed').attr('title', 'Esta resposta gera bloqueio?');
  }, function() {
    $(this).css('cursor', 'auto');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id='cont'></div>

Can I run a .hover that shows a tooltip in a disabled checkbox?

2 Answers2