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:
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.
Muchas gracias por el post, necesitaba hacer un ejemplo en mi pagina web: http://obedalvarado.pw/ y me ha funcionado correctamente. Nuevamente Gracias!
Gracias por tu comentario
Me gustaría que popover se active al pasar el raton (hover), alguien me ayuda?
Hola, para eso debes pasarle el parámetro focus al botón que lance el popover de la siguiente manera : data-trigger=”focus”
Saludos.
Como hago para pasarle informacion por medio de ajax y php?
Muchisimas gracias por el post. Muy util!
Un saludo
Quisiera saber como cerrar el tooltip con un boton de aceptar o una “x” con Json o JQuery, CSS