BinaryDevelop
  1. ホーム
  2. javascript

[解決済み】無効なボタンにBootstrapツールチップを有効にする方法は？

2022-04-15 02:47:04

質問

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

この動作を反転させるには、どのような方法がありますか？ 

$('[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 属性を使用します。

解決方法は？

以下は、動作するコードです。 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 属性を使用して、ボタンを有効/無効にすることができます。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します