如何在禁用按钮上启用引导工具提示?

I need to display a tooltip on disabled button and remove it on enabled button. Actually it works in reverse way.

我需要在禁用按钮上显示一个工具提示，并在启用按钮上删除它。实际上它的工作方式是相反的。

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 the demo: http://jsfiddle.net/BA4zM/68/

下面是演示:http://jsfiddle.net/BA4zM/68/

P.S.: I want to keep the attribute disabled.

注::我要禁用属性。

14 个解决方案

#1

Here is some working code: http://jsfiddle.net/mihaifm/W7XNU/200/

这里有一些工作代码: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.

其思想是使用选择器选项将工具提示添加到父元素中，然后在启用/禁用按钮时添加/删除rel属性。

#2

206

You can wrap the disabled button and put the tooltip on the wrapper:

您可以将禁用的按钮包装起来，并将工具提示放在包装器上:

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

If the wrapper has display:inline then the tooltip doesn't seem to work. Using display:block and display:inline-block seem to work fine. It also appears to work fine with a floated wrapper.

如果包装器有display:inline，那么工具提示似乎不能工作。使用display:block和display:inline-block似乎工作得很好。对于浮动包装器，它似乎也能正常工作。

UPDATE Here's an updated JSFiddle that works with the latest Bootstrap (3.3.6). Thanks to @JohnLehmann for suggesting pointer-events: none; for the disabled button.

更新这里是一个使用最新的引导程序(3.3.6)的更新JSFiddle。感谢@JohnLehmann的建议:没有;残疾人按钮。

http://jsfiddle.net/cSSUA/209/

#3

This can be done via CSS. The "pointer-events" property is what's preventing the tooltip from appearing. You can get disabled buttons to display tooltip by overriding the "pointer-events" property set by bootstrap.

这可以通过CSS完成。“指针事件”属性阻止工具提示出现。通过覆盖引导程序设置的“指针事件”属性，可以使禁用的按钮显示工具提示。

.btn.disabled {
    pointer-events: auto;
}

#4

If you're desperate (like i was) for tooltips on checkboxes, textboxes and the like, then here is my hackey workaround:

如果你对复选框、文本框之类的工具提示感到绝望，那么这就是我的hackey解决方案:

$('input:disabled, button:disabled').after(function (e) {
    d = $("<div>");
    i = $(this);
    d.css({
        height: i.outerHeight(),
        width: i.outerWidth(),
        position: "absolute",
    })
    d.css(i.offset());
    d.attr("title", i.attr("title"));
    d.tooltip();
    return d;
});

Working examples: http://jsfiddle.net/WB6bM/11/

工作示例:http://jsfiddle.net/WB6bM/11/

For what its worth, I believe tooltips on disabled form elements is very important to the UX. If you're preventing somebody from doing something, you should tell them why.

不管怎样，我相信关于禁用表单元素的工具提示对UX非常重要。如果你阻止某人做某事，你应该告诉他们原因。

#5

These workarounds are ugly. I've debugged the problem is that bootstrap automatically set CSS property pointer-events: none on disabled elements.

这些变通方案是丑陋的。我调试的问题是引导程序自动设置CSS属性指针事件:禁用元素上没有。

This magic property causes that JS is not able to handle any event on elements that matches CSS selector.

这个神奇的属性导致JS无法处理与CSS选择器匹配的元素上的任何事件。

If you overwrite this property to default one, everything works like a charm, including tooltips!

如果您将此属性覆盖为默认属性，那么一切都可以像魔法一样工作，包括工具提示!

.disabled {
  pointer-events: all !important;
}

However you shouldn't use so general selector, because you will probably have to manually stop JavaScript event propagation way you know (e.preventDefault()).

但是，您不应该使用如此通用的选择器，因为您可能需要手动停止JavaScript事件传播方式(e.preventDefault())。

#6

You can't get the tool-tip to show on a disabled button. This is because disabled elements don't trigger any events, including the tool-tip. Your best bet would be to fake the button being disabled (so it looks and acts like its disabled), so you can then trigger the tool-tip.

在禁用的按钮上无法显示工具提示。这是因为禁用的元素不会触发任何事件，包括工具提示。你最好的办法是假装这个按钮被禁用(这样看起来和行为就像它被禁用一样)，这样你就可以触发工具提示。

Eg. Javascript:

如。Javascript:

$('[rel=tooltip].disabled').tooltip();

$('[rel=tooltip].disabled').bind('click', function(){
     return false;
});

Instead of just $('[rel=tooltip]').tooltip();

而不是$(“[rel =提示]”).tooltip();

HTML:

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

JSFiddle: http://jsfiddle.net/BA4zM/75/

JSFiddle:http://jsfiddle.net/BA4zM/75/

#7

Try this example:

试试这个例子:

Tooltips must be initialized with jQuery: select the specified element and call the tooltip() method in JavaScript:

工具提示必须用jQuery初始化:选择指定的元素，并在JavaScript中调用工具提示()方法:

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

Add CSS:

添加CSS:

.tool-tip {
  display: inline-block;
}

.tool-tip [disabled] {
  pointer-events: none;
}

And your html:

html:

<span class="tool-tip" data-toggle="tooltip" data-placement="bottom" title="I am Tooltip">
    <button disabled="disabled">I am disabled</button>
</span>

#8

This is what myself and tekromancr came up with.

这是我和tekromancr想到的。

Example element:

示例元素:

<a href="http://www.google.com" id="btn" type="button" class="btn btn-disabled" data-placement="top" data-toggle="tooltip" data-title="I'm a tooltip">Press Me</a>

note: the tooltip attributes can be added to a separate div, in which the id of that div is to be used when calling .tooltip('destroy'); or .tooltip();

注意:可以将工具提示属性添加到单独的div中，在这个div中，当调用.tooltip(“destroy”)时将使用该div的id;或.tooltip();

this enables the tooltip, put it in any javascript that is included in the html file. this line might not be necessary to add, however. (if the tooltip shows w/o this line then don't bother including it)

这将启用工具提示，将其放入html文件中包含的任何javascript中。然而，可能不需要添加这一行。(如果工具提示显示了这一行的w/o，那就不要麻烦包含它)

$("#element_id").tooltip();

destroys tooltip, see below for usage.

销毁工具提示，请参阅下面的用法。

$("#element_id").tooltip('destroy');

prevents the button from being clickable. because the disabled attribute is not being used, this is necessary, otherwise the button would still be clickable even though it "looks" as if it is disabled.

防止按钮可单击。因为禁用属性没有被使用，所以这是必需的，否则按钮仍然是可点击的，即使它看起来像被禁用的一样。

$("#element_id").click(
  function(evt){
    if ($(this).hasClass("btn-disabled")) {
      evt.preventDefault();
      return false;
    }
  });

Using bootstrap, the classes btn and btn-disabled are available to you. Override these in your own .css file. you can add any colors or whatever you want the button to look like when disabled. Make sure you keep the cursor: default; you can also change what .btn.btn-success looks like.

使用bootstrap，可以使用禁用btn和btn的类。在您自己的.css文件中覆盖这些。您可以添加任何颜色或任何您希望按钮在禁用时的外观。确保你保持光标:默认;你也可以改变什么。btn。btn-success的样子。

.btn.btn-disabled{
    cursor: default;
}

add the code below to whatever javascript is controlling the button becoming enabled.

将下面的代码添加到任何控制按钮启用的javascript中。

$("#element_id").removeClass('btn-disabled');
$("#element_id").addClass('btn-success');
$('#element_id).tooltip('destroy');

tooltip should now only show when the button is disabled.

工具提示现在应该只显示在禁用按钮时。

if you are using angularjs i also have a solution for that, if desired.

如果你正在使用angularjs，如果需要的话，我也有一个解决方案。

#9

In my case, none of the above solutions worked. I found that it's easier to overlap the disabled button using an absolute element as:

在我的例子中，上面的解决方案都没有起作用。我发现使用绝对元素重叠禁用按钮更容易:

<div rel="tooltip" title="I workz" class="wrap">
  <div class="overlap"></div>
  <button>I workz</button>
</div>

<div rel="tooltip" title="Boo!!" class="wrap poptooltip">
  <div class="overlap"></div>
  <button disabled>I workz disabled</button>
</div>

.wrap {
  display: inline-block;
  position: relative;
}

.overlap {
  display: none
}

.poptooltip .overlap {
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 1000;
}

Demo

演示

#10

You can simply override Bootstrap's "pointer-events" style for disabled buttons via CSS e.g.

您可以简单地通过CSS来覆盖引导程序的“指针事件”样式。

.btn[disabled] {
 pointer-events: all !important;
}

Better still be explicit and disable specific buttons e.g.

最好还是显式的，并禁用特定的按钮。

#buttonId[disabled] {
 pointer-events: all !important;
}

#11

Working code for Bootstrap 3.3.6

启动3.3.6的工作代码

Javascript:

$('body').tooltip({
  selector: '[data-toggle="tooltip"]'
});

$(".btn").click(function(e) {
 if ($(this).hasClass("disabled")){
   e.preventDefault();
 }
});

CSS:

a.btn.disabled, fieldset[disabled] a.btn {
  pointer-events: auto;
}

#12

pointer-events: auto; does not work on an <input type="text" />.

pointer-events:汽车;不使用 <输入类型="text" />。

I took a different approach. I do not disable the input field, but make it act as disabled via css and javascript.

我采取了不同的方法。我没有禁用输入字段，但是通过css和javascript使其作为禁用的。

Because the input field is not disabled, the tooltip is displayed properly. It was in my case way simpler than adding a wrapper in case the input field was disabled.

由于未禁用输入字段，因此将正确显示工具提示。在我的例子中，它比添加包装器更简单，以防输入字段被禁用。

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

#13

You can imitate the effect using CSS3.

你可以用CSS3来模拟效果。

Simply take the disabled state off the button and the tooltip doesn't appear anymore.. this is great for validation as the code requires less logic.

只需将禁用状态从按钮上移除，工具提示就不会再出现了。这对于验证非常有用，因为代码需要更少的逻辑。

I wrote this pen to illustrate.

我写这支笔是为了说明。

CSS3 Disabled Tooltips

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>

#14

For Bootstrap 3

引导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;
}

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

#1