web-dev-qa-db-ja.com

ブートストラップポップオーバーはボタンでのみ機能し、アンカーやスパンでは機能しません

Tooltip.jsとpopover.jsを含めています。

私のマークアップが次のように見えるとき：

<button class="popover-dismiss" data-toggle="popover" title="sheen" 
data-content="&lt;a href=&quot;sheen60&quot;&gt;60&lt;/a&gt;, &lt;a href=&quot;sheen80&quot;&gt;80&lt;/a&gt;">
PDS
</button>

jSで

$('.popover-dismiss').popover({
  trigger: 'focus',
  html: 'true'
})

その後、すべてが正常に動作します。ただし、buttonをaに変更すると、破損します。コンソールにエラーはありません。単にポップアップを表示しないだけです。

<a href="javascript://" class="popover-dismiss" data-toggle="popover" title="sheen" 
data-content="&lt;a href=&quot;sheen60&quot;&gt;60&lt;/a&gt;, &lt;a href=&quot;sheen80&quot;&gt;80&lt;/a&gt;">
PDS
</a>

まったく同じ属性。ボタンの代わりにアンカーのみ。また、スパンを使用してみましたが、どちらも機能していないようです。

javascripttwitter-bootstrappopover
28
Chris Sobolewski

それでは、Twitter Bootstrapにバグがあることがわかりました。数回開閉されました。

現在、回避策があります：

1）bootstrap popoversの初期化時にtrigger: focusを使用しないでください。
2）代わりに、ポップオーバーをトリガーするアイテムの属性としてdata-trigger="focus"を使用します
3）ポップオーバーのあるアイテムは、tabindex="-1"を明示的に宣言する必要があります。

ここでのクロスブラウザーの動作例： http://jsfiddle.net/v5L7m/3/

また、実際のユースケースシナリオでこれを確認しました。

Edit：@xanderielは、tabindex=0がブラウザのネイティブフォーカス境界を引き起こすように見えることに注意しました。彼らは、-1のtabindexがこの境界を排除すると言います。

86
Chris Sobolewski

さて、トリガーとして「フォーカス」を使用する場合、要素はフォーカス可能でなければなりません。 tabindexを設定すると、要素が強制的にフォーカス可能になります。そのため、tabindexが設定されると、トリガー「フォーカス」が機能し始めます。

ユーザーが実際にタブキーを押す要素で停止すると思われない場合は、-1のtabindexの使用を検討してください。

これですべてです。トリガー：フォーカスはJS初期化で使用できます。

7
Lukas

回避策などは必要ありません。 JSを介して情報を設定すればうまく機能します。以下に例を示します。

HTML：

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

JS：

$(function() {
    $(document).popover({
        selector: '[data-toggle=popover]',
        trigger: 'focus'
    });
});

JSFiddle：https://jsfiddle.net/s02ykLo2/

6
adamj

popover()呼び出しにcontainer: 'body'オプションを設定してみてください。

0
Olim Saidov