¿Cómo usar un div como contenido para Popover de Twitter?

Twitter’s Popover is a bootstrap component somewhat similar to tool-tip where the highlighting difference is that it is triggered whenever the user clicks on the specified selector. Before we use <div> as the content inside the popover, let us have a look on DOM structure of the popover:

Programa: estructura DOM de un popover.

<!-- DOM structure template for the popover
     id's and attributes are usually specified
     automatically -->
<div class="popover fade show" 
     role="tooltip" 
     id="popover_XYZ"
     style="position: absolute; 
            will-change: transform;
            top: 0px; left: 0px; 
            transform: translate3d(6px, 360px, 0px);"
     x-placement="bottom">
    <div class="arrow" style="left: 80px;"></div>
    <h3 class="popover-header">Popover Header here</h3>
    <div class="popover-body">Popover Content here</div>
</div>

Producción:

Div dentro del popover: por defecto, no podemos definir HTML dentro del popover. Para eso, estableceremos la opción html como ‘verdadera’ para permitir el contenido HTML dentro de la ventana emergente al inicializar en la fase inicial. Almacene el contenido HTML div dentro de una variable, inicialice esa variable como una opción para el popover.

Sintaxis:

$([selector]).popover({ html:true; title:[header]; content:[Content] });

Ejemplo:

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
    
    <!-- CDN's Required -->
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js">
    </script>
</head>
  
<body>
    <br>
    <br>
    <center>
        <div class="container">
            
            <!-- Data for popover header -->
            <div class="pickHead">
                <h3 class="text text-success">
                  GeeksforGeeks
                </h3>
            </div>
            
            <!-- Data for popover content -->
            <div class="pickData">
                <div class="text">
                  A computer science portal for Geeks
                </div>
            </div>
            <br>
            <br>
            
            <!-- Popover Button -->
            <button class="btn btn-success" 
                    data-toggle="popover">
              Twitter's popover
            </button>
        </div>
    </center>
    <script>
        
        // Pick the div data as required
        var head = "" + $('.pickHead').html();
        var data = "" + $('.pickData').html();
        
        // Append the html data as the options
        $(document).ready(function() {
            $('[data-toggle="popover"]').popover({
                html: true,
                title: head,
                content: data
            });
        });
    </script>
</body>
  
</html>

Producción:

Publicación traducida automáticamente

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

Deja una respuesta Cancelar la respuesta