Bootstrap Popover: ¿cómo agregar un enlace en el popover de texto?

Yo uso bootstrap 3 popover.

Y ahora me gustaría un enlace en el popvover de texto.

Código:

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

Pero cuando empiezo el código en html veo:

<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

Conozco ese problema en el símbolo. " pero no sé tener agregar enlace en enlace …

Dime, por favor, ¿cómo será el código correcto?

PD: si la pregunta ya existe, dame el enlace.

tendrás que pasar html opción con valor true mientras inicializa popover como sigue.

Manifestación

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" target="_blank"
>
  test link
</a>

Simplemente use el atributo datos-html=”verdadero”.

<button
  data-toggle="popover"
  data-content="Link: <a href="https://stackoverflow.com/questions/20299246/xyz.com">XYZ</a>"
  data-html="true">
  CLICK
</button>

solía data-trigger="focus" y tuve un problema con un enlace en el contenido de popover. Si se hace clic con el botón del mouse en el enlace y se mantiene presionado por un momento, la ventana emergente desaparece y el enlace ‘no funciona’. Algunos clientes se quejaron de eso.

HTML

<a href="#" role="button" class="btn popovers" data-toggle="popover" data-trigger="focus" title="" data-content="test content <a href="https://stackoverflow.com/" title="test add link">link on content</a>" data-original-title="test title">test link</a>

JS

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

Puedes reproducir el problema. aquí.

Usé lo siguiente código para solucionar el problema:

data-trigger="manual" en html y

$("[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');
                });
            }
        });

Si desea utilizar el enfoque y un enlace dentro de la ventana emergente que necesita para evitar que la ventana emergente se cierre al hacer clic dentro. La solución más limpia que encontré fue preventDefault hace clic dentro de una ventana emergente que tiene el .popover class o cualquier otra clase personalizada que defina.

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

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

Simplemente agregando data-html=”true” está funcionando con el atributo de enlace 🙂

Vale la pena señalar que, si bien las respuestas dadas son correctas, un enlace causará problemas cuando el data-trigger="focus" Está aplicado. como descubrí de un cliente si el clic se produce rápidamente en una ventana emergente, se activará el enlace; si un usuario mantiene presionado el botón del mouse, desafortunadamente se activa el gatillo y se produce la ventana emergente. En resumen, considere si un enlace es necesario y planifique clics lentos.

$("body").on("mousedown",".my-popover-content a",function(e){
    document.location = e.target.href;
});

lo hace por mí: básicamente, toma el asunto en tus propias manos. Nuevamente, esto es con opciones emergentes html: true, sanitize: falsey trigger : "focus"