如何在禁用按鈕上啟用 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>

這是一個演示

PS：我想保留disabled屬性。

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”屬性是阻止工具提示出現的原因。 您可以通過覆蓋引導程序設置的“指針事件”屬性來獲取禁用按鈕以顯示工具提示。

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

就其價值而言，我相信禁用表單元素的工具提示對用戶體驗非常重要。 如果你阻止某人做某事，你應該告訴他們為什么。

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

這些解決方法很丑陋。 我調試過的問題是引導程序自動設置 CSS 屬性pointer-events: none在禁用元素上。

這個神奇的屬性導致 JS 無法處理匹配 CSS 選擇器的元素上的任何事件。

如果您將此屬性覆蓋為默認值，則一切都像魅力一樣，包括工具提示！

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

但是，您不應該使用如此通用的選擇器，因為您可能必須手動停止您所知道的 JavaScript 事件傳播方式（ e.preventDefault() ）。

Answer 7

就我而言，上述解決方案均無效。 我發現使用絕對元素重疊禁用按鈕更容易：

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

試試這個例子：

工具提示必須用jQuery初始化：選擇指定的元素並調用JavaScript的tooltip()方法：

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

Answer 9

您無法在禁用的按鈕上顯示工具提示。 這是因為禁用的元素不會觸發任何事件，包括工具提示。 最好的辦法是假裝按鈕被禁用（所以它看起來和行為就像它被禁用一樣），這樣你就可以觸發工具提示。

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

您可以簡單地通過 CSS 覆蓋禁用按鈕的 Bootstrap 的“指針事件”樣式，例如

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

最好還是明確的並禁用特定的按鈕，例如

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

Answer 11

如果它對任何人有幫助，我就可以通過簡單地在其中放置一個跨度並在其中應用工具提示內容，在其周圍應用 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 12

這就是我和 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，如果需要，我也有一個解決方案。

Answer 13

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

Answer 14

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

Answer 15

只需將 disabled 類添加到按鈕而不是 disabled 屬性，以使其可見地禁用。

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

注意：這個按鈕只是看起來被禁用了，但它仍然會觸發事件，你只需要注意這一點。

Answer 16

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

Answer 17

對於 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>

Answer 18

我終於解決了這個問題，至少在 Safari 中，通過將“pointer-events: auto”放在“disabled”之前。 相反的順序不起作用。

Answer 19

我在動態控件上遇到了同樣的問題，所以我只是簡單地通過設置樣式屬性並啟用只讀屬性 = true 當我們需要禁用元素但如果用戶單擊輸入按鈕控件時顯示工具提示。

Yes disabled 停止所有事件功能，如 ObBlur、onClick /OnFocus。 代替以下行：

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

在禁用的輸入按鈕元素中啟用工具提示后，我們可以通過下面的代碼來完成。

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

乙

希望這能解決問題。

Answer 20

只需覆蓋禁用元素上的 hover 事件的 css

添加 css：

pointer-events: all !important;
cursor: not-allowed !important;

這將禁用按鈕上的點擊，但仍將允許 hover 事件啟用工具提示工作