Como usar un botón popover en Bootstrap y como pasarle tags a su campo data-content

En este artículo vamos a explicar el funcionamiento de un botón popover en Bootstrap, además explicaremos el mecanismo para pasarle etiquetas en HTML y de esta manera tener más opciones a la hora de personalizarlo a nuestro gusto.

Resultado final del ejemplo:

Boton popover de bootstrap

Para que funcione el elemento le añadimos primero el siguiente JavaScript:

<script type="text/javascript">
 
$(document).ready(function(){
 
$('[data-toggle="popover"]').popover();
 
});
 
</script>

A continuación le añadimos el código de nuestro botón popover:

 
<button 
type="button" 
class="btn btn-info" 
data-toggle="popover" 
data-placement="bottom" 
title="Título del Popover" 
data-content="
<ul><li>Primer elemento</li>
<li>Segundo elemento</li>
<li>Tercer elemento</li></ul>">
Botón popover
</button>

Después de añadirle el JavaScript y el botón tenemos el problema que no podemos pasarle a su campo data-content etiquetas html, por lo tanto no podemos hacer que aparezca el contenido de nuestro popover en modo lista, o simplemente poner un salto de línea entre otros tags como por ejemplo:

data-content="Aquí se muestra <br/> la información"

Ahora bien la solución para personalizar nuestro popover de BootStrap es pasarle el parámetro en nuestra función popover { html : true }, el resultado sería el siguiente:

<script type="text/javascript">
$(document).ready(function(){
$('[data-toggle="popover"]').popover({ html : true });
});
</script>

Con esto conseguiremos habilitar las etiquetas HTML para que no las lea como simple texto y si como tags en HTML.

Iván Martínez

Ingeniero Informático apasionado por el mundo del desarrollo WEB. Me gusta caminar por este mundo lleno de tecnologías y día a día aprender cosas nuevas como el doctor Frankenstein ¡dadme cosas para experimentar!

7 comentarios sobre “Como usar un botón popover en Bootstrap y como pasarle tags a su campo data-content

    • el Abr 28, 2016 a las 6:12 pm
      Permalink

      Gracias por tu comentario

      Respuesta
  • el Ago 17, 2017 a las 7:12 pm
    Permalink

    Me gustaría que popover se active al pasar el raton (hover), alguien me ayuda?

    Respuesta
    • el Sep 18, 2017 a las 5:31 pm
      Permalink

      Hola, para eso debes pasarle el parámetro focus al botón que lance el popover de la siguiente manera : data-trigger=”focus”

      Saludos.

      Respuesta
  • el Mar 14, 2018 a las 7:24 pm
    Permalink

    Como hago para pasarle informacion por medio de ajax y php?

    Respuesta
  • el Jun 20, 2018 a las 10:48 am
    Permalink

    Muchisimas gracias por el post. Muy util!
    Un saludo

    Respuesta
  • el Feb 1, 2019 a las 5:21 pm
    Permalink

    Quisiera saber como cerrar el tooltip con un boton de aceptar o una “x” con Json o JQuery, CSS

    Respuesta

Deja un comentario

Tu dirección de correo electrónico no será publicada.