How to enable Bootstrap tooltip on disabled button?
html, javascript, jquery, twitter-bootstrap, twitter-bootstrap-tooltip
Solution
Here is some working code: 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");
}
});
The idea is to add the tooltip to a parent element with the `selector` option, and then add/remove the `rel` attribute when enabling/disabling the button.
Problem
I need to display a tooltip on a disabled button and remove it on an enabled button. Currently, it works in reverse. What is the best way to invert this behaviour? ``` $('[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> ``` Here is a demo P.S.: I want to keep the `disabled` attribute.