Popovers en bootstrap con ejemplos

Posted on by Rudeus Greyrat

Un Bootstrap Popover es un atributo en bootstrap que se puede usar para hacer que cualquier sitio web se vea más dinámico. Los popovers generalmente se usan para mostrar información adicional sobre cualquier elemento y se muestran con un clic del puntero del mouse sobre ese elemento. En la ventana emergente, si hace clic en cualquier elemento que incluya en su secuencia de comandos, aparecerá un mensaje en particular como ventana emergente y podrá ver su mensaje tal como lo definió en la secuencia de comandos. 

Es fácil implementar popovers en un sitio web usando Bootstrap, ya que solo necesita definir algunos atributos para el elemento como se describe a continuación:

Sintaxis : 

data-toggle="popover" 
title="Popover Header" 
data-content="Some content inside the box"

El atributo de alternancia de datos define el Popover, el atributo de título define el Mosaico para el Popover y el atributo de contenido de datos se usa para almacenar el contenido que se mostrará en el Popover respectivo.

Incluya el siguiente javascript en su código para que funcione.

Javascript

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

Ejemplo:

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Example</title>
 
    <!-- Link Bootstrap CSS -->
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">
    </script>
</head>
<body>
    <div class="container">
        <h3>Popover Example</h3>
        <a href="#" data-toggle="popover" title="Popover Header"
            data-content="Some content inside the popover">
            GeeksforGeeks</a>
    </div>
    <script>
        $(document).ready(function () {
            $('[data-toggle="popover"]').popover();
        });
    </script>
</body>
</html>

Producción:


Diferentes tipos de orientación de Popover en Bootstrap:

  • Alineación superior : en este tipo de alineación de ventana emergente, el contenido de la ventana emergente se muestra en la parte superior del elemento sobre el que hemos aplicado este atributo. Para alinear el popover en la parte superior, asigne un atributo data-placement = “top” .

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Example</title>
    <!-- Bootstrap CSS and JS -->
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">
    </script>
</head>
<body>
    <div class="container">
        <h3>Popover Example</h3>
        <ul class="list-inline">
            <li><a href="#" title="Header" data-toggle="popover"
                    data-placement="top" data-content="Content">
                    GeeksforGeeks
                </a>
            </li>
        </ul>
    </div>
    <script>
        $(document).ready(function () {
            $('[data-toggle="popover"]').popover();
        });
    </script>
</body>
</html>

Producción:

  • Alineación a la izquierda : en este tipo de alineación de ventana emergente, el contenido de la ventana emergente se muestra a la izquierda del elemento sobre el que hemos aplicado este atributo. Para alinear el popover en la parte superior, asigne un atributo data-placement = “left” .

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Example</title>
    <!-- Bootstrap CSS and JS -->
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">
    </script>
</head>
<body>
    <div class="container">
        <h3>Popover Example</h3>
        <ul class="list-inline">
            <li><a href="#" title="Header" data-toggle="popover"
                    data-placement="left" data-content="Content">
                    GeeksforGeeks
                </a>
            </li>
        </ul>
    </div>
    <script>
        $(document).ready(function () {
            $('[data-toggle="popover"]').popover();
        });
    </script>
</body>
</html>

Producción:

  • Alineación a la derecha : en este tipo de alineación de ventana emergente, el contenido de la ventana emergente se muestra en la parte superior del elemento sobre el que hemos aplicado este atributo. Para alinear el popover en la parte superior, asigne un atributo data-placement = “right” .

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Example</title>
    <!-- Bootstrap CSS and JS -->
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">
    </script>
</head>
<body>
    <div class="container">
        <h3>Popover Example</h3>
        <ul class="list-inline">
            <li><a href="#" title="Header" data-toggle="popover"
                    data-placement="right" data-content="Content">
                    GeeksforGeeks
                </a>
            </li>
        </ul>
    </div>
    <script>
        $(document).ready(function () {
            $('[data-toggle="popover"]').popover();
        });
    </script>
</body>
</html>

Producción:

  • Alineación inferior : en este tipo de alineación de ventana emergente, el contenido de la ventana emergente se muestra en la parte inferior del elemento sobre el que hemos aplicado este atributo. Para alinear la ventana emergente en la parte superior, asigne un atributo data-placement = “bottom” .

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Example</title>
    <!-- Bootstrap CSS and JS -->
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">
    </script>
</head>
<body>
    <div class="container">
        <h3>Popover Example</h3>
        <ul class="list-inline">
            <li><a href="#" title="Header" data-toggle="popover"
                    data-placement="bottom" data-content="Content">
                    GeeksforGeeks
                </a>
            </li>
        </ul>
    </div>
    <script>
        $(document).ready(function () {
            $('[data-toggle="popover"]').popover();
        });
    </script>
</body>
</html>

Producción:


Navegador compatible:

  • Google Chrome
  • Borde de Microsoft
  • Firefox
  • Ópera
  • Safari

Publicación traducida automáticamente

Artículo escrito por Jitender_1998 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *