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

我需要在禁用的按钮上显示工具提示，并在启用的按钮上删除它。目前，情况正好相反

改变这种行为的最佳方法是什么

$（'[rel=tooltip]'）。tooltip（）


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

例如，Javascript：

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

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

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

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

而不仅仅是
$（'[rel=tooltip]'）。tooltip（）；​

HTML:


按钮禁用
按钮未禁用

jsFIDLE:
以下是一些工作代码：

想法是使用
选择器
选项将工具提示添加到父元素中，然后在启用/禁用按钮时添加/删除
rel
属性。
如果您（像我一样）迫切需要复选框、文本框等上的工具提示，那么下面是我的黑客解决方法：

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

$（'input:disabled，button:disabled'）。在（function（e）之后{
d=$（“”）；
i=$（本）；
d、 css({
高度：i.外部高度（），
宽度：i.外径（），
位置：“绝对”，
})
d、 css（i.offset（））；
d、 属性（“标题”，即属性（“标题”）；
d、 工具提示（）；
返回d；
});

工作实例：

不管它有什么价值，我相信关于禁用表单元素的工具提示对用户体验非常重要。如果你阻止某人做某事，你应该告诉他们原因。
你可以包装禁用的按钮，并将工具提示放在包装上：

<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
似乎可以正常工作。它似乎也可以与浮动包装器配合使用

更新这里有一个更新的JSFIDLE，它与最新的引导（3.3.6）一起工作。感谢@JohnLehmann建议
指针事件：无用于禁用按钮

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

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

这就是我和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>

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

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

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

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

如果您使用angularjs，我也有一个解决方案，如果需要的话。
这些解决方案很难看。我调试过的问题是，引导程序会自动在禁用的元素上设置CSS属性指针事件：none

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

如果将此属性覆盖为默认属性，则所有内容都像一个符咒，包括工具提示

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

但是，您不应该使用如此通用的选择器，因为您可能必须以您知道的方式手动停止JavaScript事件传播（e.preventDefault（））。
您可以通过CSS简单地覆盖禁用按钮的引导“指针事件”样式，例如

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

最好还是显式，禁用特定按钮，例如

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

Bootstrap 3.3.6的工作代码

Javascript:

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

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

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

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

CSS:

指针事件：自动在
上不起作用

我采取了不同的方法。我没有禁用输入字段，而是通过css和javascript将其设置为禁用

由于未禁用输入字段，因此工具提示将正确显示。在我看来，这比在输入字段被禁用的情况下添加包装器要简单

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


$（文档）.ready（函数（）{
$（'.disabled[data toggle=“tooltip”]'）。tooltip（）；
$（'.disabled'）.mousedown（函数（事件）{
事件。stopImmediatePropagation（）；
返回false；
});
});
输入[type=text]。已禁用{
游标：默认值；
边缘顶端：40px；
}
在我的例子中，上述解决方案都不起作用。我发现使用绝对元素重叠禁用按钮更容易，如下所示：

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


我工作
我是残疾人
.包裹{
显示：内联块；
位置：相对位置；
}
.重叠{
显示：无
}
.pop工具提示。重叠{
显示：块；
位置：绝对位置；
身高：100%；
宽度：100%；
z指数：1000；
}

试试这个例子：

工具提示必须用
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>


我是残疾人
您可以使用CSS3模拟效果

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

我写这支笔是为了举例说明



主按钮
用于引导3

HTML

JS


$（'button.sp btn overlap'）
波弗先生({
触发器：“悬停”，
容器：'主体'，
位置：'底部'，
内容：函数（）{
返回$（this.parent（）.prop（'disabled'））
（这个）
[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>

<button 
    class="btn btn-success" 
    disabled
    data-hint="Enabled">
  <div class="sp-btn-overlap" data-hint="Disabled"></div>
  Submit button
</button>

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

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