CODEWITHSUNDEEP
javascriptjqueryhtmlcss
mapgiordani
mapgiordani

Reputation: 65

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

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?

Upvotes: 0

Views: 1667

Answers (2)

Every Screamer
Every Screamer

Reputation: 530

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.

Upvotes: 1

Parth Raval
Parth Raval

Reputation: 4423

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

Upvotes: 1

Related Questions