我是否可以运行一个在禁用复选框中显示工具提示的.hover？

Question

我有一个动态表单，当鼠标悬停时，我需要一组复选框显示工具提示。

我只是在使用jquery寻找一个干净的工具提示代码，我找到了能够解决我的问题的css资源。

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

在这里，我已经为工具提示从@being_ethereal的答案中选择了代码，但是它不适用于特定的配置。

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

在单击按钮后，它需要与附加的HTML进行交互。

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

我做错了什么？

Answer 1

首先，正如@RoryMcCrossan所说，您不能将禁用的输入悬停.

其次，即使附加了未禁用的输入，触发该函数也会出现问题。最好是

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

因此，将侦听器放在body上，而不是放在您正在创建的新元素上。

不管怎么说，你需要用这个输入做点什么.将其包装在标签中，然后将标题放在标签上。应该会很好的。

Answer 2

​

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

​