我需要在禁用按钮上显示工具提示，并在启用按钮上删除它。目前，它是反向工作的。
扭转这种行为的最好方法是什么?
$('[rel=tooltip]').tooltip();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<hr>
<button class="btn" disabled rel="tooltip" data-title="Dieser Link führt zu Google">button disabled</button>
<button class="btn" rel="tooltip" data-title="Dieser Link führt zu Google">button not disabled</button>
这是一个演示
附注:我想保留disabled属性。
下面是一些工作代码:http://jsfiddle.net/mihaifm/W7XNU/200/
$('body').tooltip({
selector: '[rel="tooltip"]'
});
$(".btn").click(function(e) {
if (! $(this).hasClass("disabled"))
{
$(".disabled").removeClass("disabled").attr("rel", null);
$(this).addClass("disabled").attr("rel", "tooltip");
}
});
其思想是将工具提示添加到带有选择器选项的父元素中，然后在启用/禁用按钮时添加/删除rel属性。
您可以使用CSS3模仿这种效果。
只需将禁用状态从按钮上取下，工具提示就不再出现了。这对于验证非常有用，因为代码需要的逻辑更少。
我用这支笔来说明。
CSS3禁用工具提示
[disabled] {
&[disabled-tooltip] {
cursor:not-allowed;
position: relative;
&:hover {
&:before {
content:'';
border:5px solid transparent;
border-top:5px solid black;
position: absolute;
left: 50%;
transform: translate(-50%, calc(-100% + -5px));
}
&:after {
content: attr(disabled-tooltip);
position: absolute;
left: 50%;
transform: translate(-50%, calc(-100% + -15px));
width:280px;
background-color:black;
color:white;
border-radius:5px;
padding:8px 12px;
white-space:normal;
line-height:1;
}
}
}
}
<button type="button" class="btn btn-primary" disabled-tooltip="I am a disabled tooltip using CSS3.. You can not click this button." disabled>Primary Button</button>
你可以包装禁用按钮，并将工具提示放在包装器上:
<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似乎工作得很好。它似乎也可以很好地使用浮动包装器。
这是一个更新的JSFiddle，它与最新的Bootstrap(3.3.6)一起工作。感谢@JohnLehmann建议指针事件:没有;为禁用按钮。
http://jsfiddle.net/cSSUA/209/
下面是一些工作代码:http://jsfiddle.net/mihaifm/W7XNU/200/
$('body').tooltip({
selector: '[rel="tooltip"]'
});
$(".btn").click(function(e) {
if (! $(this).hasClass("disabled"))
{
$(".disabled").removeClass("disabled").attr("rel", null);
$(this).addClass("disabled").attr("rel", "tooltip");
}
});
其思想是将工具提示添加到带有选择器选项的父元素中，然后在启用/禁用按钮时添加/删除rel属性。
