如何在禁用的按钮上启用Bootstrap提示框？

Question

我需要在禁用的按钮上显示工具提示，并在启用的按钮上移除它。目前，它的行为相反。

如何才能最好地反转这种行为？

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

这里有一个演示

P.S.：我想保留disabled属性。

- Lorraine Bernard

---

需要禁用的按钮已经被禁用了... - KoU_warch

@EH_warch 我想保持按钮禁用，但同时在单击事件上显示工具提示。 - Lorraine Bernard

这不会对楼主有所帮助，但是未来的访问者可能会欣赏知道 'readonly' 属性类似（虽然不完全相同），并且不会阻止像鼠标悬停这样的用户事件。 - Chuck

Answer 1

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

<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建议对于禁用的按钮使用pointer-events:none;。 http://jsfiddle.net/cSSUA/209/

- balexand

---

这是文档建议的方式，如果你使用这里建议的inline-block技巧，它会起作用！ - user736893

然而，如果您的按钮是按钮组的一部分，那么包装该按钮会破坏您的美感 :( 有没有办法解决“btn-group”的这个问题？ - Cody

Cody，对于btn-groups，我发现你不能将它们包装起来，否则它们将无法正确渲染。我将pointer-events设置为“auto”（只是以这种方式进行了定位：“div.btn-group > .btn.disabled { pointer-events: auto; }”以防万一），并且还连接了按钮的onclick事件，使其仅返回false。感觉有点hacky，但对我们的应用程序有效。 - Michael

在Bootstrap 3.3.5中似乎无法正常工作。JSFiddle - bytesized

对于 Bootstrap 3.3.5，还需要添加 .btn-default[disabled] { pointer-events:none; }。 - John Lehmann

Answer 2

这可以通过 CSS 完成。 "pointer-events" 属性是阻止工具提示出现的原因。你可以通过覆盖 Bootstrap 设置的 "pointer-events" 属性来使禁用的按钮显示工具提示。

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

- Gene Parcellano

---

只是一点小提示，这仅适用于IE 11或更高版本。几乎所有其他现代浏览器都已经支持它一段时间了。请参见：http://caniuse.com/#feat=pointer-events - Neil Monroe

这似乎不适用于“[disabled]”按钮。另外，在Bootstrap（2.3.2）的源代码中也没有看到pointer-events的分配。 - kangax

在一个使用Bootstrap3和Angular的应用中，经过应用这个样式后，原本被禁用的按钮现在可以被点击。 - Dimitri Kopriwa

我尝试在一个带有btn类的锚点上使用它。 它看起来是被禁用的，工具提示也起作用了，但我却能够点击链接（这不应该是可能的）。 - Olle Härstedt

@OlleHärstedt 我认为 disabled 属性只影响 <button>。这个解决方案仅适用于 <button>，你可能需要找到另一种方法来禁用 <a> 上的点击事件。如果我错了，请有人纠正我。谢谢。 - Gene Parcellano

Answer 3

如果你像我一样急需在复选框、文本框等控件上使用工具提示，那么这里有一个我想出来的折中方法：

$('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;
});

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

就我所知，对于禁用的表单元素来说，工具提示对用户体验非常重要。如果您阻止某人执行某项操作，您应该告诉他们原因。

- nolanpro

---

这应该是正确的答案。对我来说一点也不像hackey :) - Starkers

应该烘烤的东西居然成了噩梦。 - user736893

这个很好用，但是如果你的输入位置基于窗口大小改变（比如说你的表单元素换行/移动），你需要在$(window).resize上添加一些处理来移动工具提示div，否则它们会出现在错误的位置。我建议结合CMS在这里的答案：https://dev59.com/f3E85IYBdhLWcg3wShaf - knighter

对于这个问题的点赞数量感到惊讶。为了解决一个可以有简单解决方法的问题，代码量太多了。 - Manny Alvarado

Answer 4

基于Bootstrap 4

禁用元素 带有disabled属性的元素是不可交互的，这意味着用户无法将焦点、悬停或单击它们来触发工具提示（或弹出框）。作为解决方法，您需要从一个包装器或ideally made keyboard-focusable using tabindex="0"来触发工具提示，并覆盖禁用元素上的pointer-events。

<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

所有细节在这里：Bootstrap 4文档

- gon250

---

感谢您的帖子，我简直不敢相信我竟然忽略了这个设置。 - Edd

Answer 5

这是一段工作代码：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");
    }
});

这个想法是通过 selector 选项将提示框添加到父元素中，然后在启用/禁用按钮时添加/删除 rel 属性。

- mihai

---

这个答案被认可是因为在2012年回答时有效。自那时以来，情况已经发生了变化，主要是fiddle中使用的外部资源。我添加了新的bootstrap cdn网址，但代码仍然相同。 - mihai

我能为这个Bootstrap 4.1的问题得到一个更新的解决方案吗？请确保内容流畅易懂，但不改变原意。谢谢！ - Jason Ayer

Fiddle在Firefox中无法工作（至少如此）。 - RASMiranda

Answer 6

这些解决方法很丑陋。我已经调试了问题，发现bootstrap在禁用元素上自动设置CSS属性pointer-events: none。

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

如果您将此属性覆盖为默认属性，则一切都能正常工作，包括工具提示！

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

然而，您不应使用如此通用的选择器，因为您可能需要手动停止JavaScript事件传播的方法（e.preventDefault()）。

- lukyer

Answer 7

如果对任何人有所帮助，我成功地通过在按钮内添加一个span并在其中应用工具提示来使禁用的按钮显示工具提示，还使用了angularjs...

<button ng-click="$ctrl.onClickDoThis()"
        ng-disabled="!$ctrl.selectedStuff.length">
  <span tooltip-enable="!$ctrl.selectedStuff.length"
        tooltip-append-to-body="true"
        uib-tooltip="Select at least one thing to enable button.">
    My Butt
  </span>
</button>

- Nathan Beach

---

你真聪明。这是一个如此简单的解决方案。 - brt

Answer 8

尝试这个例子：

提示框必须使用jQuery进行初始化：选择指定的元素并在JavaScript中调用tooltip()方法。

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

添加 CSS:

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

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

您的HTML代码：

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

- Denis Bubnov

Answer 9

在我的情况下，以上解决方案均未奏效。我发现使用绝对定位元素来重叠禁用按钮更容易实现：

<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

- vorillaz

Answer 10

您无法在禁用的按钮上显示工具提示。这是因为禁用的元素不会触发任何事件，包括工具提示。您最好的选择是伪造按钮被禁用（使其看起来和行为像被禁用），以便您可以触发工具提示。

例如：Javascript：

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

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

不要只是使用$('[rel=tooltip]').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/

- Adam

---

我正在寻找一个禁用按钮的解决方案。 - Lorraine Bernard

@Adam 说的完全是胡说八道！当然可以在禁用的按钮上获取工具提示！ - Starkers