如何在禁用按钮上启用Bootstrap工具提示？

我需要在禁用的按钮上显示工具提示，然后在启用的按钮上将其删除。目前，它的工作方式相反。

颠倒这种行为的最佳方法是什么？

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

这是一个演示

PS：我想保留该disabled属性。

这是一些工作代码：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在启用/禁用按钮时添加/删除属性。

您可以包装禁用按钮并将工具提示放在包装器上：

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

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

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

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

出于其价值，我相信禁用表单元素的工具提示对UX非常重要。如果您阻止某人做某事，则应告诉他们原因。

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

此魔术属性导致JS无法处理与CSS选择器匹配的元素上的任何事件。

如果将此属性覆盖为默认属性，则所有内容都将像工具提示一样起作用！

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

但是，您不应使用一般的选择器，因为您可能必须手动停止已知的JavaScript事件传播方式（e.preventDefault（））。

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

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

演示版

您不能使工具提示显示在禁用的按钮上。这是因为禁用的元素不会触发任何事件，包括工具提示。最好的选择是伪造被禁用的按钮（这样它的外观和行为就像被禁用的一样），因此您可以触发工具提示。

例如。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/

试试这个例子：

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

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

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

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

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

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

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

注意：工具提示属性可以添加到单独的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，如果需要的话，我也有解决方案。

如果它可以帮助任何人，我可以通过在其中插入一个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>

基于Bootstrap 4

禁用的元素具有禁用属性的元素不是交互式的，这意味着用户无法聚焦，悬停或单击它们以触发工具提示（或弹出窗口）。作为一种解决方法，您将希望从包装器或触发工具提示，最好使用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文档

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

您可以使用CSS3模仿效果。

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

我写了这支笔来说明。

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>

只需将禁用的类添加到按钮而不是禁用的属性，即可使其明显地被禁用。

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

注意：此按钮似乎仅处于禁用状态，但仍会触发事件，您只需要注意这一点即可。

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

对于Bootstrap 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>

我终于解决了这个问题，至少在Safari中，通过将“ pointer-events：auto”放在“ disabled” 之前。反向顺序无效。