如何在禁用按钮上启用引导工具提示？答案

【问题标题】：How to enable Bootstrap tooltip on disabled button?如何在禁用按钮上启用引导工具提示？
【发布时间】：2012-10-29 23:30:35
【问题描述】：

我需要在禁用按钮上显示工具提示并在启用按钮上将其删除。目前，它是反向工作的。

扭转这种行为的最佳方法是什么？

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

这是demo

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

【问题讨论】：

需要禁用的按钮被禁用...
@EH_warch 我想让按钮保持禁用状态，但同时在点击事件上显示工具提示。
这对 OP 没有帮助，但未来的访问者可能会喜欢知道“只读”属性是相似的（尽管不相同）并且不会阻止鼠标悬停等用户事件。

标签： javascript jquery html twitter-bootstrap twitter-bootstrap-tooltip

【解决方案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/

【讨论】：

这是文档的建议，如果您使用此处建议的内联块技巧，它就会起作用！
但是，如果您的按钮是按钮组的一部分，那么包裹按钮会破坏您的审美:(无论如何要为btn-groups 克服这个问题？
Cody，对于 btn-groups，我发现你不能包装它们，否则它们将无法正确呈现。我将指针事件设置为“自动”（只是针对：“div.btn-group > .btn.disabled {指针事件：自动；}”以防万一），并且还连接了按钮的 onclick 事件，所以它只是返回假。感觉很老套，但它适用于我们的应用程序。
这似乎在 bootstrap 3.3.5 中不起作用。 JSFiddle
对于 bootstrap 3.3.5 还添加 .btn-default[disabled] { pointer-events:none; }

【解决方案2】：

这可以通过 CSS 来完成。 “指针事件”属性是阻止工具提示出现的原因。您可以通过覆盖引导程序设置的“pointer-events”属性来获得禁用按钮以显示工具提示。

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

【讨论】：

只是附带说明，这仅适用于 11 或更高版本的 IE。几乎所有其他现代浏览器都支持它一段时间了。见：caniuse.com/#feat=pointer-events
这似乎不适用于[disabled] 按钮。也看不到 Bootstrap (2.3.2) 在源代码中的任何位置分配指针事件。
@kangax 你是对的，这仅适用于通过 bs 'disabled' 类禁用的按钮。 Balexand 的回答 (stackoverflow.com/a/19938049/1794871) 在这种情况下效果最好。感谢您指出这一点。
在 bootstrap3 Angular 应用中，应用此样式后，禁用的按钮现在可以点击
我尝试在带有 btn 类的锚点上使用它。它看起来被禁用并且工具提示有效，但我可以点击链接（应该不可能）。

【解决方案3】：

如果您迫切需要（像我一样）复选框、文本框等的工具提示，那么这是我的 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;
});

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

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

【讨论】：

这应该是正确的答案。对我来说一点也不像 hackey :)
对于应该烤的东西真是一场噩梦:(
这很好用，但是如果您的输入位置根据窗口大小而变化（例如，如果您的表单元素换行/移动），您将需要在 $(window).resize 上添加一些处理以移动tooltip div 左右，否则会出现在错误的地方。我建议从这里结合 CMS 的答案：stackoverflow.com/questions/2854407/…
对此点赞的数量感到惊讶。对于可以有简单解决方法的东西来说，代码太多了。

【解决方案4】：

这是一些工作代码：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 属性。

【讨论】：

这是被接受的答案，因为它在 2012 年得到了回答。从那以后情况发生了变化，主要是小提琴中使用的外部资源。我在 bootstrap cdn 中添加了新的 URL，代码还是一样的。
我能否获得针对 Bootstrap 4.1 版的更新修复？
小提琴在 Firefox 中不起作用（至少）

【解决方案5】：

基于 Bootstrap 4

禁用元素具有 disabled 属性的元素不是交互式的，这意味着用户无法聚焦、悬停或单击它们来触发工具提示（或弹出框）。作为一种解决方法，您需要从包装器或触发工具提示，理想情况下使用 tabindex="0" 使键盘可聚焦，并覆盖禁用元素上的指针事件。

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

【讨论】：

感谢您的帖子，可以相信我忽略了此设置。

【解决方案6】：

这些变通方法很难看。我已经调试的问题是引导程序自动在禁用元素上设置 CSS 属性 pointer-events: none。

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

如果您将此属性覆盖为默认属性，一切都会像魅力一样发挥作用，包括工具提示！

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

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

【讨论】：

【解决方案7】：

就我而言，上述解决方案均无效。我发现使用绝对元素重叠禁用按钮更容易：

<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

【讨论】：

【解决方案8】：

试试这个例子：

Tooltips必须用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>

【讨论】：

【解决方案9】：

如果它对任何人有帮助，我可以通过简单地在其中放置一个跨度并在其中应用工具提示内容，在它周围使用 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>

【讨论】：

你太棒了。如此简单的解决方案。

【解决方案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 完全是垃圾！当然，您可以在禁用按钮上获得工具提示！

【解决方案11】：

您可以简单地通过 CSS 覆盖 Bootstrap 的“指针事件”样式以禁用按钮，例如

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

最好还是明确并禁用特定按钮，例如

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

【讨论】：

成功了！谢谢！
很高兴我能帮助@VedranMandić :)
如果我们将pointer-events设置为all，按钮可以被点击，这是错误的行为

【解决方案12】：

这是我和 tekromancr 想出的。

示例元素：

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

注意：tooltip 属性可以添加到单独的 div 中，其中调用 .tooltip('destroy'); 时要使用该 div 的 id。或 .tooltip();

这将启用工具提示，将其放入 html 文件中包含的任何 javascript 中。但是，可能不需要添加此行。（如果工具提示显示没有此行，则不要费心包含它）

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

销毁工具提示，用法见下文。

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

防止按钮被点击。因为没有使用 disabled 属性，所以这是必要的，否则即使“看起来”好像它被禁用，按钮仍然可以点击。

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

使用引导程序，您可以使用 btn 和 btn-disabled 类。在您自己的 .css 文件中覆盖这些。您可以添加任何颜色或任何您希望按钮在禁用时的外观。确保保持光标：默认；您还可以更改 .btn.btn-success 的外观。

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

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

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

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

如果您使用的是 angularjs，如果需要，我也有一个解决方案。

【讨论】：

我在工具提示上使用destroy 时遇到了一些问题。（请参阅this）但是，$("#element_id").tooltip('disable') 和 $("#element_id").tooltip('enable') 为我工作。

【解决方案13】：

Bootstrap 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;
}

【讨论】：

【解决方案14】：

您可以使用 CSS3 模仿效果。

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

我写这支笔是为了说明。

CSS3 Disabled Tooltips

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

【讨论】：

【解决方案15】：

只需将 disabled 类添加到按钮而不是 disabled 属性即可使其可见地被禁用。

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

注意：这个按钮看起来只是被禁用，但它仍然会触发事件，你只需要注意这一点。

【讨论】：

【解决方案16】：

pointer-events: auto; 不适用于<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">

【讨论】：

【解决方案17】：

对于引导程序 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>

【讨论】：

【解决方案18】：

我终于解决了这个问题，至少在 Safari 中，通过将“pointer-events: auto”before“禁用”。逆序无效。

【讨论】：

【解决方案19】：

我在动态控件上遇到了同样的问题，所以我只是通过设置样式属性并启用只读属性 = true 当我们需要禁用元素但如果用户单击输入按钮控件时显示工具提示.

Yes disabled 停止所有事件功能，如 ObBlur、onClick /OnFocus。代替以下行：

((document.getElmentByName('MYINPUTBTN').item(0))).disabled= true;

在禁用的输入按钮元素中启用该工具提示后，我们可以通过下面的代码进行操作。

((document.getElmentByName('MYINPUTBTN').item(0))).setAttribute("style", "background-color": #e9ecef;");

b

希望这能解决问题。

【讨论】：