我需要在禁用按钮上显示工具提示，并在启用按钮上删除它。目前，它是反向工作的。
扭转这种行为的最好方法是什么?
$('[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属性。
pointer-events:汽车;在<input type="text" />上无效。
我采取了不同的方法。我没有禁用输入字段，但使其作为通过css和javascript禁用。
因为输入字段没有被禁用，所以工具提示显示正常。在我的情况下，如果输入字段被禁用，这比添加包装器要简单得多。
$(document).ready(function () {
$('.disabled[data-toggle="tooltip"]').tooltip();
$('.disabled').mousedown(function(event){
event.stopImmediatePropagation();
return false;
});
});
input[type=text].disabled{
cursor: default;
margin-top: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.3/js/tether.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<input type="text" name="my_field" value="100" class="disabled" list="values_z1" data-toggle="tooltip" data-placement="top" title="this is 10*10">
引导3
HTML
<button
class="btn btn-success"
disabled
data-hint="Enabled">
<div class="sp-btn-overlap" data-hint="Disabled"></div>
Submit button
</button>
CSS
button { position:relative; }
.sp-btn-overlap {
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
background:none;
border:none;
z-index:1900;
}
JS
$('button .sp-btn-overlap')
.popover({
trigger: 'hover',
container: 'body',
placement: 'bottom',
content: function() {
return $(this).parent().prop('disabled')
? $(this).data('hint')
: $(this).parent().data('hint');
}
});
$('button .sp-btn-overlap')
.popover({
trigger: 'hover',
container: 'body',
placement: 'bottom',
content: function() {
return $(this).parent().prop('disabled')
? $(this).data('hint')
: $(this).parent().data('hint'); }
});
button {
position:relative; /* important! */
}
.sp-btn-overlap {
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
background:none;
border:none;
z-index:1900;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<button disabled class="btn btn-default" data-hint="Enabled">
<div class="sp-btn-overlap" data-hint="Disabled"></div>
Disabled button
</button>
<button class="btn btn-default" data-hint="Enabled">
<div class="sp-btn-overlap" data-hint="Disabled"></div>
Enabled button
</button>
您可以使用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>
