web-dev-qa-db-fra.com

Bootstrap Popover ne fonctionne que sur les boutons - pas d'ancrages

J'inclus tooltip.js et popover.js.

Quand mon balisage ressemble à ceci:

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

avec JS

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

Alors tout fonctionne bien. Cependant, lorsque je change ma button en une a, elle se rompt Il n'y a pas d'erreur dans la console. Cela ne donne tout simplement pas le popup.

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

Les mêmes attributs. Juste une ancre au lieu d'un bouton. J'ai également essayé d'utiliser un span et cela ne semble pas fonctionner non plus.

javascripttwitter-bootstrappopover
26
Chris Sobolewski

Ok, il s’avère qu’il ya un bogue dans Twitter Bootstrap. Il a été ouvert et fermé plusieurs fois.

Il y a actuellement un travail autour de:

1) N'utilisez pas trigger: focus lors de l'initialisation des popovers d'amorçage
2) Utilisez plutôt data-trigger="focus" comme attribut aux éléments qui déclencheront le popover
3) Les éléments qui ont un popover devront avoir tabindex="-1" explicitement déclaré. 

Exemple de travail sur plusieurs navigateurs ici: http://jsfiddle.net/v5L7m/3/

Je l'ai également confirmé dans un scénario de cas d'utilisation réel.

Edit: @xanderiel a noté que tabindex=0 semble maintenant provoquer une bordure de focus native dans le navigateur, comme le demandait ma réponse initiale. Ils disent qu'un tabindex de -1 élimine cette frontière.

84
Chris Sobolewski

Eh bien, je suppose que si vous voulez utiliser "focus" comme déclencheur, votre élément doit être focalisable. La définition de tabindex oblige l'élément à pouvoir être mis au point. C'est pourquoi le déclencheur "focus" commence à fonctionner lorsque tabindex est défini.

Envisagez d'utiliser un tabindex de -1 si vous ne vous attendez pas à ce que les utilisateurs s'arrêtent réellement sur l'élément qui appuie sur la touche de tabulation.

C'est tout ce qu'on peut en dire. Déclencheur: le focus peut être utilisé en initialisation JS.

7
Lukas

Il n'y a pas besoin d'une solution de contournement ou quoi que ce soit. Cela fonctionne très bien si vous définissez les informations via JS, voici un exemple:

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/

5
adamj

Essayez de définir l'option container: 'body' pour l'appel popover(). 

0
Olim Saidov