web-dev-qa-db-fra.com

Bootstrap Popover - Comment ajouter un lien dans un texte popover?

J'utilise bootstrap 3 popover.

Et maintenant je voudrais lien sur le texte popvover.

Code:

<a href="#" 
  role="button" 
  class="btn popovers" 
  data-toggle="popover" 
  title="" 
  data-content="test content <a href="" title="test add link">link on content</a>" 
  data-original-title="test title"
  >
  test link
</a>

Mais quand je commence le code en HTML je vois: 

<a href="#" role="button" class="btn popovers" data-toggle="popover" title="" data-content="test content &lt;a href=" "="">link on content</a>
" 
data-original-title="test title"
&gt;
test link

Je connais ce problème dans le symbole " mais je ne sais pas comment ajouter un lien dans le lien ...

Dites-moi s'il vous plaît comment va être le code correct?

P.S .: si la question existe déjà, donnez-moi un lien.  

htmlhyperlinktwitter-bootstrap-3popover
46
user2881809

Vous devrez passer l’option html avec la valeur true lors de l’initialisation du popover comme suit.

Démo

JS:

$("[data-toggle=popover]")
.popover({html:true})

HTML:

<a href="#" role="button" class="btn popovers" data-toggle="popover" title="" data-content="test content <a href='' title='test add link'>link on content</a>" data-original-title="test title">test link</a>
79
nik

Utilisez simplement l'attribut data-html = "true" .

<button
  data-toggle="popover"
  data-content="Link: <a href='xyz.com'>XYZ</a>"
  data-html="true">
  CLICK
</button>
33
netAction

J'ai utilisé data-trigger="focus" et j'ai eu un problème avec un lien dans le contenu de popover. Si vous cliquez sur le lien en maintenant le bouton de la souris enfoncé pendant un moment, le popover disparaît et le lien ne fonctionne pas Certains clients se sont plaints de cela ... Vous pouvez reproduire le problème ici .

J'ai utilisé le code suivant pour résoudre le problème:

data-trigger="manual" en html et

$("[data-toggle=popover]")
.popover({ html: true})
    .on("focus", function () {
        $(this).popover("show");
    }).on("focusout", function () {
        var _this = this;
        if (!$(".popover:hover").length) {
            $(this).popover("hide");
        }
        else {
            $('.popover').mouseleave(function() {
                $(_this).popover("hide");
                $(this).off('mouseleave');
            });
        }
    });
4
Daniil Grankin
<a href="#" class="btn popovers" data-toggle="popover" title="" data-content="test content <a href='' title='test add link'>link on content</a>" data-html="true"><i class="glyphicon glyphicon-info-sign"></i></a>

En ajoutant simplement data-html = "true", on utilise l'attribut link :)

1
user7961627

Il est intéressant de noter que même si les réponses données sont correctes, un lien posera des problèmes lorsque le data-trigger="focus" est appliqué. Comme je l'ai découvert d'un client, si le clic se produit rapidement sur un popover, le lien est activé, si un utilisateur appuie sur son bouton de la souris, le déclencheur se déclenche et le popover apparaît. En bref, déterminez si un lien est nécessaire et prévoyez des clics peu importants.

1
Antony

Si vous souhaitez utiliser focus et un lien dans la fenêtre contextuelle, vous devez empêcher sa fermeture lorsque vous cliquez à l'intérieur. La solution la plus propre que j'ai trouvée consistait à preventDefault cliquer dans un Popup contenant la classe .popover

$('body')
  .on('mousedown', '.popover', function(e) {
    e.preventDefault()
  });
});
0
Tim S