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

扭转这种行为的最好方法是什么?

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

这是一个演示

附注:我想保留disabled属性。


当前回答

如果你(像我一样)迫切需要复选框、文本框之类的工具提示,那么这里是我的破解方法:

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

无论如何,我相信禁用表单元素的工具提示对用户体验非常重要。如果你阻止某人做某事,你应该告诉他们原因。

其他回答

在我的案例中,以上的解决方案都不起作用。我发现使用绝对元素更容易重叠禁用按钮,如下:

<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

pointer-events:汽车;在<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">

无法在禁用按钮上显示工具提示。这是因为禁用的元素不会触发任何事件,包括工具提示。最好的方法是假装按钮已禁用(这样它的外观和行为就像已禁用一样),这样您就可以触发工具提示。

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

我在动态控件上也有同样的问题,所以我只是简单地这样做,设置样式属性并启用只读属性= true,当我们需要禁用元素时,但如果用户单击输入按钮控件,则显示工具提示。

是禁用停止所有事件功能,如ObBlur, onClick /OnFocus。代替下面的线:

((document.getElmentByName (MYINPUTBTN) .item(0)))。禁用= true。

我们可以通过下面的代码,工具提示将在禁用输入按钮元素中启用。

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

b

希望这能解决这个问题。

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

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

最好还是显式地禁用特定的按钮。

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