html - example - popover w3

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

Question

Uso bootspop 3 popover.

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

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

Sé que el problema en el símbolo " pero no sé, tengo agregar enlace en el enlace ...

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

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

Answer 1

Simplemente use el atributo data-html = "true" .

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

Answer 2

Tendrá que pasar la opción html con el valor true mientras inicia Popover como lo siguiente.

Demo

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>

Answer 3

Usé data-trigger="focus" y tuve un problema con un enlace en el contenido de popover. Si se hace clic en el botón del mouse y se mantiene pulsado por un tiempo, el popover desaparece y el enlace "no funciona". Algunos clientes se quejaron de eso. Puedes reproducir el problema here .

Usé el siguiente code 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'');
            });
        }
    });

Answer 4

Vale la pena señalar que si bien las respuestas dadas son correctas, un enlace causará problemas cuando se aplica el data-trigger="focus" . Como me enteré por un cliente si el clic se produce rápidamente en un popover, el enlace se activará, si un usuario mantiene presionado el botón del mouse desafortunadamente el gatillo se activa y se produce el popover. En resumen, considere si un enlace es necesario y planifique clics desordenados.

Answer 5

<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á trabajando con el atributo link :)