Bootstrap-Popover-Plugin

A Popover ähnelt einem Tooltip, der verwendet wird, um sekundäre Informationen zu einem beliebigen Element anzuzeigen, wenn der Benutzer darauf klickt. Wir können Informationen ähnlich einem Tooltip in vier Richtungen links, rechts, oben und unten anzeigen. Es bietet eine vollständige Ansicht mit einer Überschrift. Popovers sind lediglich eine Erweiterung von Tooltips, die anders aussehen und für mehr Inhalt konzipiert sind. Popovers bieten die Möglichkeit, sowohl den Kopfbereich als auch den Inhaltsbereich anzuzeigen.

In diesem Tutorial werden die folgenden Themen erläutert, die mit Bootstrap-Popover verwendet werden.

  • Popovers über Datenattribute erstellen
  • Popovers über JavaScript erstellen
  • Popover-Optionen
  • Popover-Methoden
  • lesen Sie auch:

    • Bootstrap-Setup
    • Bootstrap-Typografie

    Die folgenden Beispiele zeigen die verschiedenen Techniken, die zur Implementierung der Popovers in Bootstrap verwendet werden. Wenn Sie Fragen dazu haben Bootstrap-Popoverschreiben Sie es bitte in den Kommentarbereich.

    Bootstrap-Popover über Datenattribute

    Mithilfe des Attributs können wir ein Popover erstellen data-toggle=“popover“ zum Anker- oder Knopfelement. Der data-content=“etwas Text“ Das Attribut wird verwendet, um den Inhalt für das spezifische Element anzugeben. Das Folgende ist ein Beispiel:

    <!DOCTYPE html>
    <head>
    <title>Bootstrap Example</title>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script>
    $(function(){
       $("[data-toggle="popover"]").popover();
     });
    </script>
    </head>
    <body>
    <div  >
    <div style="padding:30px 100px 10px;">
    <h2>Popover via Data Attributes</h2><br><br>
    <button type="button"   data-toggle="popover"
    data-placement="left" title="Left Popover" data-content="Popover display secondary information of any element when it is clicked by the user.">Tooltip on left</button>
    
    <button type="button"   data-toggle="popover"
    data-placement="top" title="Top Popover" data-content="Popover display secondary information of any element when it is clicked by the user.">Tooltip on top</button>
    
    <button type="button"   data-toggle="popover"
    data-placement="bottom" title="Bottom Popover" data-content="Popover display secondary information of any element when it is clicked by the user.">Tooltip on bottom</button>
    
    <button type="button"   data-toggle="popover"
    data-placement="right" title="Right Popover" data-content="Popover display secondary information of any element when it is clicked by the user.">Tooltip on right</button>
    </div>
    </div>
    </body>
    </body>
    </html>
    
    • Beispiel: Bootstrap-Popover über Datenattribute ausführen

    Beispiel für Bootstrap-Popover über Datenattribute

    Bootstrap-Popover über JavaScript

    Wir können Popover auch anzeigen, indem wir verwenden Popover() Methode mit ID oder Klassenselektor im JavaScript-Code, wie im folgenden Beispiel gezeigt.

    <!DOCTYPE html>
    <head>
    <title>Bootstrap Example</title>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script>
    $(document).ready(function(){
       $(".pop-top").popover({
          placement:'top'
       });
       $(".pop-right").popover({
             placement:'right'
       });
       $(".pop-bottom").popover({
             placement:'bottom'
       });
       $(".pop-left").popover({
             placement:'left'
       });
    });
    </script>
    </head>
    <body>
    <div  >
    <div style="padding:30px 100px 10px;">
    <h2>Popover via JavaScript</h2><br><br>
    <button type="button"  
    data-placement="left" title="Left Popover" data-content="Popover display secondary information of any element when it is clicked by the user.">Tooltip on left</button>
    
    <button type="button"  
    data-placement="top" title="Top Popover" data-content="Popover display secondary information of any element when it is clicked by the user.">Tooltip on top</button>
    
    <button type="button"  
    data-placement="bottom" title="Bottom Popover" data-content="Popover display secondary information of any element when it is clicked by the user.">Tooltip on bottom</button>
    
    <button type="button"  
    data-placement="right" title="Right Popover" data-content="Popover display secondary information of any element when it is clicked by the user.">Tooltip on right</button>
    </div>
    </div>
    </body>
    </body>
    </html>
    
    • Führen Sie Bootstrap Popover über ein JavaScript-Beispiel aus

    Bootstrap-Popover über JavaScript-Beispiel

    Bootstrap-Popover-Optionen

    Die folgende Tabelle zeigt Optionen, die mit Popover verwendet werden können:

    Option Typwert Standardwert Beschreibung

    AnimationBoolescher WertWAHREs wendet einen Fade-Übergang auf das Popover an.
    htmlBoolescher WertFALSCHEs fügt HTML-Elemente in das Popover ein.
    PlatzierungZeichenfolge/FunktionRechtsEs legt die Position des Popovers fest. Wenn es keine Position enthält, wird es standardmäßig an der rechten Position angezeigt.
    WählerZeichenfolgeFALSCHPopover-Objekte an angegebene Ziele delegieren.
    TitelZeichenfolge/FunktionFALSCHEs legt den Standardwert fest, wenn keine Titelattribute vorhanden sind.
    auslösenZeichenfolge‚klicken‘Es definiert, wie der Tooltip ausgelöst wird, z. B. Klicken, Hover, Fokus und Manuell.
    VerzögerungNummer/Objekt0Es fügt eine Verzögerung in ms ein, bevor Popover angezeigt oder ausgeblendet wird, was nicht für den manuellen Triggertyp gilt.
    Containerstring/falseFALSCHEs hängt ein Popover an ein bestimmtes Element an.

    Bootstrap-Popover-Methoden

    Beispiel für eine Methodenbeschreibung

    $().popover(optionen)Es hängt einen Popover-Handler an eine Elementsammlung an.$().popover(optionen)
    .popover(‚toggle‘)Es schaltet das Popover des Elements um.$(‚#element‘).popover(‚toggle‘)
    .popover(’show‘)Es zeigt Elemente-Popover.>$(‚#element‘).popover(’show‘)
    .popover(‚verstecken‘)Es verbirgt ein Element-Popover.>$(‚#element‘).popover(‚hide‘)
    .popover(‚zerstören‘)Es verbirgt und zerstört Popover-Elemente.>$(‚#element‘).popover(‚zerstören‘)

    Das folgende Beispiel zeigt die Verwendung von Popover-Methoden:

    <!DOCTYPE html>
    <head>
    <title>Bootstrap Example</title>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script>
    $(document).ready(function(){
       $(".show-popover").click(function(){
          $(".my-popover a").popover('show');
       });
       $(".hide-popover").click(function(){
             $(".my-popover a").popover('hide');
       });
      $(".toggle-popover").click(function(){
            $(".my-popover a").popover('toggle');
      });
      $(".destroy-popover").click(function(){
            $(".my-popover a").popover('destroy');
      });
    });
    </script>
    </head>
    <body>
    <div  >
    <h2>Popover using Methods</h2><br><br>
    <p   style="padding:30px 100px 10px;">
    <a href="#" title="My Popover"   data-toggle="popover" data-content="Popover display secondary information of any element when it is clicked by the user.">Popover</a></p>
    <button type="button"  >Show</button>
    <button type="button"  >Hide</button>
    <button type="button"  >Toggle</button>
    <button type="button"  >Destroy</button>
    </div>
    </body>
    </body>
    </html>
    
    • Führen Sie Bootstrap Popover mithilfe des Methodenbeispiels aus

    Beispiel für Bootstrap-Popover mit Methoden

    Kommentar verfassen

    Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

    Nach oben scrollen