197

無効なボタンにツールチップを表示し、有効なボタンではそれを削除する必要があります。現在、それは逆に動作します。

この動作を逆転させる最良の方法は何ですか?

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

ここにデモがあります

disabledPS:属性を保持したい。

4

19 に答える 19

287

無効なボタンをラップして、ツールチップをラッパーに配置できます。

<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うまく動作しているようです。また、フローティング ラッパーでも問題なく動作するようです。

UPDATE これは、最新の Bootstrap (3.3.6) で動作する更新された JSFiddle です。無効化されたボタンを提案してくれた @JohnLehmann に感謝しpointer-events: none;ます。

http://jsfiddle.net/cSSUA/209/

于 2013-11-12T19:21:35.200 に答える
28

チェックボックスやテキストボックスなどのツールチップが必要な場合（私がそうであったように）、これが私のハッキーの回避策です。

$('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にとって非常に重要であると私は信じています。誰かが何かをするのを妨げているのなら、その理由を彼らに伝えるべきです。

于 2013-02-25T20:59:31.550 に答える
19

ここにいくつかの作業コードがあります: 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

于 2012-11-09T21:17:59.623 に答える
8

これらの回避策は醜いです。問題をデバッグしたのは、ブートストラップが CSS プロパティpointer-events: noneを無効な要素に自動的に設定することです。

このマジック プロパティにより、JS は CSS セレクターに一致する要素のイベントを処理できなくなります。

このプロパティをデフォルトのものに上書きすると、ツールチップを含め、すべてが魅力的に機能します!

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

ただし、おなじみの方法で JavaScript イベントの伝播を手動で停止する必要があるため、一般的なセレクターは使用しないでください ( e.preventDefault() )。

于 2015-06-01T08:57:55.087 に答える
4
于 2012-11-09T16:17:56.660 に答える
4

CSS などを介して、無効なボタンの Bootstrap の「pointer-events」スタイルを単純にオーバーライドできます。

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

明示的で、特定のボタンを無効にすることをお勧めします。

#buttonId[disabled] {
 pointer-events: all !important;
}
于 2016-01-11T17:32:13.880 に答える
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 に追加できます。その div の id は .tooltip('destroy'); を呼び出すときに使用されます。または .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 を使用している場合は、必要に応じてその解決策もあります。

于 2014-07-28T17:19:17.913 に答える
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;
}
于 2016-04-28T09:43:04.917 に答える
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">

于 2016-07-20T12:10:58.387 に答える
0

動的コントロールでも同じ問題が発生したので、要素を無効にする必要がある場合は、スタイル属性を設定し、読み取り専用プロパティ = true を有効にしますが、ユーザーが入力ボタン コントロールをクリックするとツールチップを表示します。

はい無効にすると、ObBlur、onClick /OnFocus などのすべてのイベント機能が停止しました。以下の行の代わりに:

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

無効な入力ボタン要素でツールチップが有効になった後、以下のコードを使用して実行できます。

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

b

これで問題が解決することを願っています。

于 2021-04-28T20:08:21.947 に答える