TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

¿Cómo crear Popovers de Bootstrap 5?

10

Popover no es más que una información sobre herramientas más grande que se muestra en un cuadro emergente y apunta hacia el elemento activado. Similar al componente de información sobre herramientas de Bootstrap, el componente popover también requiere una biblioteca de JavaScript de terceros popper.min.js para su posicionamiento. Puede consultar la plantilla de inicio completa de Bootstrap para usar los archivos de script y CSS necesarios.

Tutorial de Bootstrap 5 Popovers

  1. Empezando con Bootstrap popover
  2. Inicializando el componente Bootstrap
  3. Popover en botones
  4. Posicionamiento de popover
  5. Popover descartable
  6. Personalización de popover

1 Introducción a Popover

Antes de usar el componente popover, recuerde lo siguiente:

  • Popover necesita un complemento de información sobre herramientas, lo que significa que debe incluir el archivo "bootstrap.min.js" en su plantilla HTML.
  • También necesita una biblioteca de JavaScript de terceros "popper.min.js" para un posicionamiento adecuado.
  • Con Bootstrap 4, puede utilizar el archivo "bootstrap.bundle.min.js" precompilado que contiene "bootstrap.min.js" y "popper.min.js".
  • Para mejorar el rendimiento de la carga de la página, el popover predeterminado no se cargará en la página. Debe inicializar explícitamente con el elemento padre para cargar el popover.
  • La ventana emergente no se mostrará cuando no haya título o contenido dentro de la ventana emergente.
  • La ventana emergente predeterminada se ocultará solo si vuelve a hacer clic en el elemento activado. De lo contrario, se mostrará incluso si desplaza el contenido de la página.
  • La ventana emergente descartable se ocultará cuando haga clic en cualquier lugar.

2 Inicialización de Popover

Al igual que la información sobre herramientas, los elementos emergentes también deben inicializarse antes de su uso. La forma más genérica es inicializar globalmente como se muestra a continuación:

<script> $(function() { $('[data-toggle="popover"]').popover() }) </script>

Si ve que los estilos interfieren en el código con el popover, puede definir un contenedor separado para un elemento específico.

<script> $(function() { $('.example-popover').popover({ container: 'body' }) }) </script>

Recuerde incluir el script de inicialización justo después de los scripts "popper.min.js" y "bootstrap.min.js".

3 Popover en el botón

Comencemos agregando un popover en un elemento de botón:

<button type="button" class="btn btn-lg btn-primary" data-toggle="popover" title="Here is Content Heading" data-content="Here is the actual content inside the popover box and below the heading."> Large Button Element </button>

En caso de que haya inicializado para body, debe agregar el atributo data-container = "body” al botón.

Mientras que la información sobre herramientas se muestra al pasar el mouse, las ventanas emergentes se muestran solo después de hacer clic en el elemento. En el código de ejemplo anterior, al hacer clic en el elemento del botón se activará el cuadro emergente en la dirección correcta como se muestra a continuación:

¿Cómo crear Popovers de Bootstrap 5?

4 Popovers de posicionamiento

Los popovers se pueden colocar en cuatro direcciones: izquierda, derecha, arriba y abajo del elemento de activación. Se logra utilizando el atributo "ubicación de datos" como el siguiente código:

<button type="button" class="btn btn-secondary" data-toggle="popover" data-placement="left" title="Here is Content Heading" data-content="Here is the actual content inside the popover box and below the heading."> Popover on Left </button> <button type="button" class="btn btn-danger" data-toggle="popover" data-placement="right" title="Here is Content Heading" data-content="Here is the actual content inside the popover box and below the heading."> Popover on Right </button> <button type="button" class="btn btn-info" data-toggle="popover" data-placement="top" title="Here is Content Heading" data-content="Here is the actual content inside the popover box and below the heading."> Popover on Top </button> <button type="button" class="btn btn-success" data-toggle="popover" data-placement="bottom" title="Here is Content Heading" data-content="Here is the actual content inside the popover box and below the heading."> Popover on Bottom </button>

A continuación se muestran las diferentes posiciones de los popovers:

¿Cómo crear Popovers de Bootstrap 5?

5 Popover descartable

Por defecto, aparecerá una ventana emergente cuando haga clic en el elemento y desaparecerá al hacer clic en el elemento nuevamente. No desaparecerá cuando haga clic aleatoriamente en la página fuera del elemento. Puede crear un popover descartable usando el siguiente código:

<a tabindex="0" class="btn btn-lg btn-warning" role="button" data-toggle="popover" data-trigger="focus" title="Here is Content Heading" data-content="Here is the actual content inside the popover box and below the heading."> Dismissble Popover on A Tag </a>

El atributo data-trigger = “focus” se usa para que el popover aparezca / desaparezca al resaltar con la tecla de tabulación del teclado.

¿Cómo crear Popovers de Bootstrap 5?

Tenga en cuenta que la etiqueta se utiliza en lugar de

Fuente de grabación: webnots.com

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More