如何在禁用按钮上启用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>

这是演示:http://jsfiddle.net/BA4zM/68/

PS:我想保持属性被禁用.

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/

Answer 2

这可以通过CSS完成."pointer-events"属性阻止了工具提示的出现.您可以通过覆盖bootstrap设置的"pointer-events"属性来获取禁用按钮以显示工具提示.

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

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

对于它的价值,我相信对于已禁用的表单元素的工具提示对于UX非常重要.如果你阻止某人做某事,你应该告诉他们原因.

Answer 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在启用/禁用按钮时添加/删除属性.

Answer 5

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

Answer 6

如果它对任何人有帮助，我就能够获得一个禁用按钮来显示工具提示，只需在其中放置一个跨度并在其中应用工具提示内容，在其周围应用 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>

Answer 7

这些变通办法很难看.我调试的问题是bootstrap 在禁用的元素上自动设置CSS属性pointer-events:none.

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

如果您将此属性覆盖为默认属性,则一切都像魅力一样,包括工具提示!

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

但是,您不应该使用这样的常规选择器,因为您可能必须手动停止您知道的JavaScript事件传播(e.preventDefault()).

Answer 8

您无法在禁用的按钮上显示工具提示.这是因为禁用的元素不会触发任何事件,包括工具提示.你最好的选择是伪造按钮被禁用(因此它的外观和行为类似于它的禁用),因此你可以触发工具提示.

例如.使用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/

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

演示

Answer 10

试试这个例子：

工具提示必须使用初始化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>