無効なボタンのブートストラップツールチップの回避策

Question

無効なボタンでブートストラップのツールチップを使用して、ボタンがそのような状態になっている理由をユーザーに知らせようとしています。しかし、ほとんどのブラウザが無効な要素に対してクリックまたはホバーイベントを発生させないという事実は、状況をより困難にします。

div内のボタンをラップし、この要素のツールチップを初期化しようとしています（thisの解決策を参照）。

だから私はこのしようとしています：

<div id="disabled-button-wrapper" data-title="Tooltip title"> 
    <button class="btn btn-primary" disabled="disabled">Button</button> 
</div> 

<script> 
    $(function() { 
     $('#disabled-button-wrapper').tooltip(); 
    }); 
</script> 

jsfiddle

をしかし、ツールチップが全く機能していません。実際には、ボタンのせいでもないので、コンテンツが何であっても、ツールチップはラッパーdivで動作していません。何が起きてる？どのような明白な詳細が欠けていますか？

編集：クロームのdevのツールを使用して検査する場合、私は実際にツールチップの要素が生成されて見ていますが、問題のカップルがあります：

• の右側にホバリングするときにのみトリガされボタン：divはすべての幅を取ります（ちなみに、私は親がボタンと同じくらい広いと思います）。しかし、ボタンの上にホバリングするときではありません。
• tooltip要素は、どこかに隠され、正しく表示されません。

編集2：jsfiddle

ラッパーは、すべての幅を取らないと、コンテナとしての体を使用すると、レンダリングの問題を解決する方法：私はいくつかの変更を加えました。唯一残っている問題は次のとおりです。無効なボタンがある部分にカーソルを置いたときに、ホバーイベントがラッパーで起動されないのはなぜですか？

Answer 1

あなたが本当にあなたは私たちがボタン

の先頭にそのデフォルトツールチップが表示されるように、いくつかのマージンを追加することが

1. にいくつかのCSSを見ることができるjsfiddle を検査した場合2.ボタンのマウスイベントがラッパーに届かないようにするCSS。

   #disabled-button-wrapper { 
       display: inline-block; /* display: block works as well */ 
       margin: 50px; /* make some space so the tooltip is visible */ 
   } 
   
   #disabled-button-wrapper .btn[disabled] { 
       /* don't let button block mouse events from reaching wrapper */ 
       pointer-events: none; 
   } 
   

   dem O：https://jsfiddle.net/dLt2ed5w/6/

Answer 2

How to enable bootstrap tooltip on disabled button?

$(function() { 
 
    $('[data-toggle="tooltip"]').tooltip(); 
 
});

#disabled-button-wrapper { 
 
    display: inline-block; 
 
} 
 

 
#disabled-button-wrapper .btn[disabled] { 
 
    pointer-events: none; 
 
} 
 

 
#disabled-button-wrapper { 
 
    cursor: not-allowed; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<div id="disabled-button-wrapper" data-placement="right" data-toggle="tooltip" data-title="Tooltip title"> 
 
    <button class="btn btn-primary" disabled>Button</button> 
 
</div>

Answer 3

あなたはCSSを下回る必要があります。

#disabled-button-wrapper .btn[disabled] { 
    /* you need this line, not to block hover event from div */ 
    pointer-events: none; 
} 
#disabled-button-wrapper { 
    display: inline-block; /* display: block works as well */ 
    margin: 50px; /* make some space so the tooltip is visible */ 
} 

説明： -

あなたは、その親コン​​テナから実際にブロックイベントを無効にするボタンbeacuse、無効なボタン用のpointer-events: none;を設定する必要があるので、あなたは、コンテナから来ホバーイベントをブロックしないように指示する必要があります。

Demo