Bootstrap 4 - Popovers
Descripción
Popover es similar a la información sobre herramientas, que ofrece una vista ampliada completa con un encabezado. Para que se active el popover, el usuario solo necesita hacer clic en un elemento.
Popover básico
Se puede crear popover utilizando el atributo data-toggle = "popover" y se puede proporcionar contenido para el popover utilizando el atributo de contenido de datos .
El siguiente ejemplo demuestra popover básico:
Ejemplo
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Basic Popover</h2>
<button type = "button" class = "btn btn-info"
data-toggle = "popover" title = "Popover title"
data-content = "Popover content goes here...">Basic Popover</button>
</div>
<script>
$(document).ready(function(){
$('[data-toggle = "popover"]').popover();
$('[data-toggle="tooltip"]').tooltip();
});
</script>
<!-- jQuery library -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin = "anonymous">
</script>
<!-- Popper -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin = "anonymous">
</script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin = "anonymous">
</script>
</body>
</html>Producirá el siguiente resultado:
Salida
Direcciones de Popover
Hay cuatro opciones, como superior, inferior, izquierda y derecha alineadas para cambiar la dirección de la ventana emergente utilizando el atributo de ubicación de datos :
El siguiente ejemplo demuestra las direcciones de popover:
Ejemplo
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<br>
<br>
<h2>Popover Directions</h2>
<br>
<button type = "button" class = "btn btn-lg btn-info"
data-container = "body" data-toggle = "popover" data-placement = "top"
data-content = "Opens at Top side of the button.">Top</button>
<button type = "button" class = "btn btn-lg btn-info"
data-container = "body" data-toggle = "popover" data-placement = "right"
data-content = "Opens at Right side of the button.">Right</button>
<button type = "button" class = "btn btn-lg btn-info"
data-container = "body" data-toggle = "popover" data-placement = "bottom"
data-content = "Opens at Bottom side of the button.">Bottom</button>
<button type = "button" class = "btn btn-lg btn-info"
data-container = "body" data-toggle = "popover" data-placement = "left"
data-content = "Opens at Left Side of the button.">Left</button>
</div>
<script>
$(document).ready(function(){
$('[data-toggle = "popover"]').popover();
$('[data-toggle = "tooltip"]').tooltip();
});
</script>
<!-- jQuery library -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin = "anonymous">
</script>
<!-- Popper -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin = "anonymous">
</script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin = "anonymous">
</script>
</body>
</html>Producirá el siguiente resultado:
Salida
Cerrar ventana emergente y elemento deshabilitado
El popover se puede cerrar al hacer clic fuera del elemento utilizando el atributo data-trigger = "focus" . El elemento popover se puede desactivar con la ayuda del atributo disabled .
El siguiente ejemplo demuestra esto:
Ejemplo
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Closing Popover</h2>
<a tabindex = "0" class = "btn btn-info" role = "button"
data-toggle = "popover" data-trigger = "focus" title = "Popover"
data-content = "Click outside to dismiss the popover">Dismissible Popover</a>
<br>
<br>
<h2>Disabled Element</h2>
<span class = "d-inline-block" data-toggle = "popover" data-content = "This button is disabled">
<button class = "btn btn-info" style = "pointer-events: none;"
type = "button" disabled>Button</button>
</span>
</div>
<script>
$(document).ready(function(){
$('[data-toggle = "popover"]').popover();
$('[data-toggle = "tooltip"]').tooltip();
});
</script>
<!-- jQuery library -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin = "anonymous">
</script>
<!-- Popper -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin = "anonymous">
</script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin = "anonymous">
</script>
</body>
</html>Producirá el siguiente resultado: