Este artículo describe cómo se puede colocar una ventana emergente en la página. El atributo popover de Bootstrap se puede usar para hacer que el sitio web se vea más dinámico. Los popovers generalmente se usan para mostrar información adicional sobre cualquier elemento y se muestran al hacer clic con el puntero del mouse sobre ese elemento. Es similar a la información sobre herramientas de Bootstrap. Sin embargo, una ventana emergente puede contener mucho más contenido que una información sobre herramientas.
Popovers es la biblioteca de terceros Popper.js para posicionar el elemento. La biblioteca popper.min.js debe incluirse antes de bootstrap.js
Sintaxis:
$(function () {
$('[data-toggle="popover"]').popover()
})
El posicionamiento puede ser a veces muy importante según la necesidad, pero el usuario debe hacerlo explícitamente, ya que Popover aparecerá de forma predeterminada en el lado derecho del elemento.
Ejemplo 1: el siguiente código es una implementación básica en HTML, Bootstrap y JavaScript. La ventana emergente en las 4 direcciones (izquierda, derecha, arriba y abajo) se ha implementado utilizando la configuración de ubicación de datos.
html
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
</script>
</head>
<body style="text-align:center;">
<div class="container">
<h3>Popover Example</h3>
<hr>
<ul class="list-inline">
<li>
<!-- Popover positioned to the top -->
<a href="#" title="Header"
data-toggle="popover"
data-placement="top"
data-content="Content">
Top
</a>
</li>
<br>
<li>
<!-- Popover positioned to the left -->
<a href="#" title="Header"
data-toggle="popover"
data-placement="left"
data-content="Content">
Left
</a>
</li>
<br>
<li>
<!-- Popover positioned to the right -->
<a href="#" title="Header"
data-toggle="popover"
data-placement="right"
data-content="Content">
Right
</a>
</li>
<br>
<li>
<!-- Popover positioned to the bottom -->
<a href="#" title="Header"
data-toggle="popover"
data-placement="bottom"
data-content="Content">
Bottom
</a>
</li>
</ul>
</div>
<script>
// Enable all popovers in the document
$(document).ready(function () {
$('[data-toggle="popover"]').popover();
});
</script>
</body>
</html>
Producción:
Ejemplo 2: El siguiente ejemplo es una ventana emergente flotante superior donde la ventana emergente se activa cuando el cursor apunta al botón y desaparece cuando el cursor se quita del botón.
html
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Example of Triggering Bootstrap
Popover on Mouseover
</title>
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<script>
$(document).ready(function () {
$('[data-toggle="popover"]').popover({
// Set the placement of
// the popup to the top
placement: 'top',
trigger: 'hover'
});
});
</script>
<style>
.pop {
margin: 150px 50px;
}
</style>
</head>
<body>
<h3>
Bootstrap Popover
</h3>
<hr>
<div class="pop">
<button type="button"
class="btn btn-primary"
data-toggle="popover"
title="Title"
data-content="Geeks for Geeks">
Popover-1
</button>
<button type="button"
class="btn btn-success"
data-toggle="popover"
title="Title"
data-content="Geeks for Geeks">
Popover-2
</button>
<button type="button"
class="btn btn-info"
data-toggle="popover"
title="Title"
data-content="Geeks for Geeks |
A computer science portal for geeks.">
Popover-3
</button>
<button type="button"
class="btn btn-warning"
data-toggle="popover" title="Title"
data-content="Geeks for Geeks">
Popover-4
</button>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por mohitgouti y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA