logo标签列表

如何在禁用的按钮上启用Bootstrap提示框？

javascriptjqueryhtmltwitter-bootstraptwitter-bootstrap-tooltip
223

我需要在禁用的按钮上显示工具提示，并在启用的按钮上移除它。目前，它的行为相反。

如何才能最好地反转这种行为？

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

这里有一个演示

P.S.：我想保留disabled属性。

需要禁用的按钮已经被禁用了... - KoU_warch
@EH_warch 我想保持按钮禁用，但同时在单击事件上显示工具提示。 - Lorraine Bernard
3
这不会对楼主有所帮助，但是未来的访问者可能会欣赏知道 'readonly' 属性类似（虽然不完全相同），并且不会阻止像鼠标悬停这样的用户事件。 - Chuck
21个回答
4

您可以通过CSS轻松地覆盖Bootstrap的“pointer-events”样式，以禁用按钮，例如：

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

更好的做法是明确指定并禁用特定的按钮，例如：
#buttonId[disabled] {
 pointer-events: all !important;
}
1
工作了！谢谢！ - Vedran Mandić
很高兴能帮助@VedranMandić :) - Ben Smith
1
如果我们将pointer-events设置为all，则按钮可以被点击，这是错误的行为。 - vuvo
2
这是我和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');或.tooltip()时要使用该div的id。

这将启用工具提示，将其放置在包含在HTML文件中的任何JavaScript中。然而，可能不需要添加此行。（如果提示显示而无需此行，则不必包含它）

$("#element_id").tooltip();

销毁工具提示，请参见下面的用法。
$("#element_id").tooltip('destroy');

禁止按钮可点击。由于未使用disabled属性，因此这是必要的，否则按钮看起来已被禁用，但仍然可以被点击。

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

使用 Bootstrap，您可以使用“btn”和“btn-disabled”类。您可以在自己的 .css 文件中覆盖这些类，并添加任何颜色或禁用状态下按钮的外观。请确保保留“cursor：default;”，您也可以更改“.btn.btn-success”的外观。
.btn.btn-disabled{
    cursor: default;
}

将以下代码添加到控制按钮启用的JavaScript中。
$("#element_id").removeClass('btn-disabled');
$("#element_id").addClass('btn-success');
$('#element_id).tooltip('destroy');

当按钮被禁用时，tooltip现在应该只显示。

如果您正在使用AngularJS，我也有一个解决方案，如果需要的话。

当我在tooltip上使用destroy时，遇到了一些问题（请参见此处）。 然而，$("#element_id").tooltip('disable')和$("#element_id").tooltip('enable')对我很有效。 - Sam Kah Chiin
1
你可以使用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>
1

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

我终于解决了这个问题，至少在Safari中，通过将“pointer-events：auto”放在“disabled”之前。反过来的顺序不起作用。

1

只需将禁用类添加到按钮上，而不是禁用属性，即可使其在视觉上被禁用。

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

注意：此按钮看似被禁用，但仍会触发事件，您需要注意这一点。
这个答案并不是很好，因为你的解决方案本质上是将一个“禁用按钮”变成一个“看起来禁用的按钮”。这两者并不相同。 - osullic
0

适用于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>

0

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

0

我在动态控件上遇到了同样的问题，所以我只是简单地通过设置样式属性并将只读属性设置为true来解决它，当我们需要将元素禁用但在用户单击输入按钮控件时显示工具提示。

是的，禁用停止了所有事件函数，如ObBlur、onClick /OnFocus。在下面这行代码的位置：

((document.getElmentByName('MYINPUTBTN').item(0))).disabled= true;

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

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

b

希望这能解决问题。
0

Bootstrap 5

对我来说，我需要做与 @nathan-beach 建议相反的事情。我把 span 放在按钮的外面：

<span data-bs-toggle="tooltip" data-bs-title="You can only refresh if 24 hours has passed or there are new reviews">
  <button type="button" class="btn btn-primary" disabled>
    <i class="fa-duotone fa-arrows-rotate"></i> Rebuild
  </button>
</span>

（以及常规的内容以启用工具提示）。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接