Bootstrap – Modificar la apariencia del popover cuando se muestra

Con este código podemos modificar la apariencia del Popover de Bootstrap cuando se despliega.

En este caso primero se muestra un icono con el signo más (+) y cuando se despliega se cambia por la equis (x). Se usa la librería Flaticon para los iconos.

La estructura del botón para el Popover es esta:

<a id="quees" data-container="body" data-toggle="popover" data-placement="top" title="Título de popover" data-content="Texto para el contenido del popover">
 Ejemplo <i class="indicator flaticon-add121"></i>
 </a>

Iniciar el popover

$('[data-toggle="popover"]').popover();

Javascript

$("[data-toggle='popover']").click(function(e) {
 var $this = $(this);
 var $icon = $this.find("i[class^='indicator']");
 if ($icon.hasClass('flaticon-add121')) {
 $icon.removeClass('flaticon-add121').addClass('flaticon-close33');
 } else {
 $icon.removeClass('flaticon-close33').addClass('flaticon-add121');
 }
 });

Tengan en cuenta de modificar las diferentes clases que se usan para que coincidan con las que utilicen.

Toda la información sobre Popover en la guía oficial de Bootstrap.


Entradas relacionadas

Comentarios

Loading Facebook Comments ...

No Comments Yet.

Leave a Comment

No Trackbacks.