Popovers en Bootstrap 5

Población son similares a las información sobre herramientas, pero contienen más información sobre un elemento particular y solo muestran su contenido cuando un usuario hace clic en ellas. Popovers puede ser descartado solo haciendo clic en el elemento nuevamente. El propósito de Popover es dar a conocer el usuario sobre el sitio web o cómo usarlo. También se usa para dar conocimiento descriptivo sobre un producto cuando el usuario lo exige.

Este artículo te cuenta sobre

• Proceso de creación de Popover
• Posiciones de Popover
• Cierre de Popover
• Popover en flotar

Cómo crear popovers

Para crear un popover, agregar data-bs-toggle = "Popover" y title = ”El texto del encabezado de Popover va aquí" para la sección de encabezado de Popover y data-bs-Content = ”El texto del cuerpo de Popover va aquí" Para la sección Cuerpo de Popover.

Código

Hacer clic

Este proceso crea y habilita un Popover básico.

Posiciones de Popover

Por lo tanto, los poblaciones también se colocan como información sobre herramientas, para colocar un uso de Popover data-bs-plactic = ”superior/inferior/derecha/izquierda" atribuir Data-BS-Toggle, título y Data-BS-contente atributos.

Código

Posiciones de Popover

Arriba
Nalga



Izquierda
Bien

Así es como se especifican las posiciones de Popover.

Cierre de Popovers

Los popoveres están cerrados solo cuando hace clic en el elemento o el botón nuevamente al que hace clic antes para hacerlo visible. Sin embargo, si desea cerrar el Popover haciendo clic en cualquier lugar de la pantalla, simplemente agregue data-bs-trigger = "enfoque" Atribuir a su botón o elemento.

Código

Cierre de Popover

Haz click en mi

Este proceso cierra un Popover cuando hace clic en cualquier lugar de la pantalla.

Popover en Hover

Como sabemos, los popoveres solo son visibles al hacer clic en un botón o elemento, pero si desea que ese popover sea visible simplemente rondando el cursor sobre el elemento o el botón al igual que la información sobre herramientas, luego agregue el data-bs-trigger = "hover" Atribuir a su botón o elemento.

Código

Popover en Hover

Flotar

Así es como aparece Popover en flotar.

Conclusión

Popover se crea agregando el data-bs-toggle = "Popover" atributo. Su encabezado se crea agregando Title = "Texto de encabezado" El atributo y su cuerpo se crean agregando el data-bs-Content = "Texto del cuerpo" Atribuir a su elemento o botón. Para habilitar Popover para escribir un código JavaScript tal como está escrito en el artículo. Como Popover se cierra solo haciendo clic en el elemento o el botón nuevamente, por lo que para cerrar haciendo clic en cualquier lugar de la pantalla, simplemente agregue data-bs-trigger = "enfoque" atributo, y si desea abrir Popover al pasar el cursor solo agregar atributo data-bs-trigger = "flotar".