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

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

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

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

当前回答

4 .基于Bootstrap

禁用元素具有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

2020-05-07 14:02:54

其他回答

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

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

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

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

（（document.getElmentByName（'MYINPUTBTN'）.item（0）））.setAttribute（“style”， “background-color”： #e9ecef;“）;

希望这能解决这个问题。

2021-04-28 20:08:21

这些变通办法是丑陋的。我已经调试的问题是，引导自动设置CSS属性指针事件:无禁用元素。

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

如果你将这个属性重写为默认属性，所有的东西都会像魔法一样工作，包括工具提示!

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

然而，你不应该使用这种通用的选择器，因为你可能不得不手动停止JavaScript事件传播的方式，你知道的(e.c preventdefault())。

2015-06-01 08:57:55

您可以使用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>

2018-02-12 00:32:03

这可以通过CSS来实现。“pointer-events”属性是阻止工具提示出现的原因。你可以通过覆盖bootstrap设置的"pointer-events"属性来让禁用按钮显示工具提示。

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

2014-04-04 15:54:32

下面是一些工作代码: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");
    }
});

其思想是将工具提示添加到带有选择器选项的父元素中，然后在启用/禁用按钮时添加/删除rel属性。

2012-11-09 21:17:59

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

推荐文章

最新文章

标签