Bootstrap 4 - Popovers

Descrizione

Il popover è simile al tooltip, offrendo una vista estesa completa di un'intestazione. Affinché il popover si attivi, un utente deve solo fare clic su un elemento.

Popover di base

Il popover può essere creato utilizzando l' attributo data-toggle = "popover" e il contenuto può essere fornito per il popover utilizzando l' attributo data-content .

L'esempio seguente mostra il popover di base:

Esempio

<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>

Produrrà il seguente risultato:

Produzione

Indicazioni popover

Sono disponibili quattro opzioni come allineamento superiore, inferiore, sinistro e destro per modificare la direzione del popover utilizzando l' attributo di posizionamento dei dati :

L'esempio seguente mostra le indicazioni popover:

Esempio

<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>

Produrrà il seguente risultato:

Produzione

Chiusura popover ed elemento disabilitato

Il popover può essere chiuso quando si fa clic all'esterno dell'elemento utilizzando l' attributo data-trigger = "focus" . L'elemento popover può essere disabilitato con l'aiuto dell'attributo disabled .

Il seguente esempio lo dimostra:

Esempio

<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>

Produrrà il seguente risultato:

Produzione

↰ Previous page

Bootstrap 4 - Popovers

Descrizione

Popover di base

Esempio

Produzione

Indicazioni popover

Esempio

Produzione

Chiusura popover ed elemento disabilitato

Esempio

Produzione

Tutorial Bootstrap 4

Bootstrap 4 Risorse utili