Question

我的表单中有一个提交按钮，如果该表单有效，则该按钮处于启用状态，否则它将处于禁用状态。我想在悬停在禁用按钮未启用按钮上方添加弹出消息。如何根据jQuery中的启用和禁用状态动态添加它？

我的代码在AngularJs中，但是我想使用jQuery应用此工具提示。

HTML标记：

<button data-toggle="tooltip" title=" Please fill the mandatory fields..!" 
        type="submit" id="continue_button"
        class="submit"  
        ng-disabled="!form.$valid" ng-click="continueForm()">Submit</button>

JS部分：

$(document).ready(function() { 
    $('[data-toggle="tooltip"]').tooltip(); 
});

在这种情况下，当启用按钮时，工具提示会起作用。但是我需要仅在禁用按钮时才显示工具提示消息。

谁能在jQuery中提供解决方案？

Answer 1

这可以通过CSS完成。 “ pointer-events”属性是阻止工具提示出现的原因。您可以通过覆盖引导程序设置的“指针事件”属性来禁用按钮以显示工具提示。

#continue_button{
  pointer-events: auto;
}

另一种解决方案是您还可以包装已禁用的按钮，并将工具提示放在包装器上：

<div class="tooltip-wrapper" data-title="Dieser Link führt zu Google">
    <button class="btn btn-default" disabled>button disabled</button>
</div>

如果包装器有display:inline，则工具提示似乎无效。使用display:block和display:inline-block似乎可以正常工作。浮动包装纸似乎也可以正常工作。

与Bootstrap配合使用的JSFiddle，为禁用的按钮添加了pointer-events: none;。 JSFiddle Demo

更新-如果要仅在按钮的禁用状态下显示工具提示，则可以检出此fiddle，其想法是使用选择器选项将工具提示添加到父元素，然后添加/删除启用/禁用按钮时的rel属性。

Answer 2

我会这样：

$('[data-toggle="tooltip"][disabled]').hover(function () {
  $(this).tooltip();
});

您需要确保按钮的CSS属性默认设置为disabled才能正常工作（即，在设置表单详细信息有效之前，请先将其设置为true）您的代码将需要将其更改为false）。

Answer 3

您可以尝试一下，不确定我是否了解您想要的内容。

$(document).ready(function(){

	$('button').mouseenter(function(){
  	if($(this).hasClass('disabled')){
    	var title = $(this).prop('title');
      $(this).append('<div class="tooltip">'+ title +'</div>');
      $('.tooltip').show();
      $(this).prop('title','');
    }
  }).mouseleave(function(){
  $('.tooltip').hide();
  });     

});

.tooltip{
  position: absolute;
  display: none;
  z-index: 1;
  top: 5px;
  height: 10px;
  display: inline-block;
  padding: 10px;
  color: #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-toggle="tooltip" title=" Please fill the mandatory fields..!" type="submit"
    class="submit disabled">Submit</button>

jQuery中悬停时禁用按钮的工具提示？

3 个答案: