Popovers

Τεκμηρίωση και παραδείγματα για την προσθήκη popover Bootstrap, όπως αυτά που βρίσκονται στο iOS, σε οποιοδήποτε στοιχείο στον ιστότοπό σας.

ΣΦΑΙΡΙΚΗ ΕΙΚΟΝΑ

Πράγματα που πρέπει να γνωρίζετε όταν χρησιμοποιείτε την προσθήκη popover:

• Τα popover βασίζονται στη βιβλιοθήκη Popper.js τρίτου μέρους για την τοποθέτηση. Πρέπει να συμπεριλάβετε το popper.min.js πριν από το bootstrap.js ή να χρησιμοποιήσετε το bootstrap.bundle.min.js/ bootstrap.bundle.jsπου περιέχει το Popper.js για να λειτουργήσουν τα popovers!
• Τα popovers απαιτούν την προσθήκη συμβουλής εργαλείου ως εξάρτηση.
• Εάν δημιουργείτε το JavaScript μας από την πηγή, απαιτείutil.js .
• Τα popover επιλέγονται για λόγους απόδοσης, επομένως πρέπει να τα αρχικοποιήσετε μόνοι σας .
• Το μηδενικό μήκος titleκαι contentοι τιμές δεν θα εμφανίσουν ποτέ popover.
• Καθορίστε container: 'body'για να αποφύγετε την απόδοση προβλημάτων σε πιο σύνθετα στοιχεία (όπως οι ομάδες εισόδου, οι ομάδες κουμπιών κ.λπ.).
• Η ενεργοποίηση popover σε κρυφά στοιχεία δεν θα λειτουργήσει.
• Τα popover για .disabledή disabledτα στοιχεία πρέπει να ενεργοποιούνται σε ένα στοιχείο περιτυλίγματος.
• Όταν ενεργοποιούνται από άγκυρες που τυλίγονται σε πολλές γραμμές, τα popover θα βρίσκονται στο κέντρο μεταξύ του συνολικού πλάτους των αγκυρίων. Χρησιμοποιήστε .text-nowrapτο στο <a>s σας για να αποφύγετε αυτήν τη συμπεριφορά.
• Τα popover πρέπει να είναι κρυφά πριν αφαιρεθούν τα αντίστοιχα στοιχεία τους από το DOM.

Συνεχίστε να διαβάζετε για να δείτε πώς λειτουργούν τα popovers με μερικά παραδείγματα.

Παράδειγμα: Ενεργοποιήστε τα popovers παντού

Ένας τρόπος για να αρχικοποιήσετε όλα τα popover σε μια σελίδα θα ήταν να τα επιλέξετε με βάση το data-toggleχαρακτηριστικό τους:

$(function () {
  $('[data-toggle="popover"]').popover()
})

Παράδειγμα: Χρήση της containerεπιλογής

Όταν έχετε ορισμένα στυλ σε ένα γονικό στοιχείο που παρεμβαίνουν σε ένα popover, θα θέλετε να καθορίσετε ένα προσαρμοσμένο containerέτσι ώστε το HTML του popover να εμφανίζεται σε αυτό το στοιχείο.

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

Παράδειγμα

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Τέσσερις κατευθύνσεις

Είναι διαθέσιμες τέσσερις επιλογές: επάνω, δεξιά, κάτω και αριστερή στοίχιση.

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

Παράβλεψη στο επόμενο κλικ

Χρησιμοποιήστε το focusέναυσμα για να απορρίψετε τα popover στο επόμενο κλικ του χρήστη σε ένα διαφορετικό στοιχείο από το στοιχείο εναλλαγής.

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

$('.popover-dismiss').popover({
  trigger: 'focus'
})

Απενεργοποιημένα στοιχεία

Τα στοιχεία με το disabledχαρακτηριστικό δεν είναι διαδραστικά, πράγμα που σημαίνει ότι οι χρήστες δεν μπορούν να τοποθετήσουν το δείκτη του ποντικιού ή να κάνουν κλικ σε αυτά για να ενεργοποιήσουν ένα popover (ή επεξήγηση εργαλείου). Ως λύση, θα θελήσετε να ενεργοποιήσετε το popover από ένα περιτύλιγμα <div>ή <span>και να παρακάμψετε το pointer-eventsστοιχείο στο απενεργοποιημένο στοιχείο.

Για απενεργοποιημένες ενεργοποιήσεις popover, μπορείτε επίσης να προτιμάτε data-trigger="hover"το popover να εμφανίζεται ως άμεση οπτική ανατροφοδότηση στους χρήστες σας, καθώς ενδέχεται να μην περιμένουν να κάνουν κλικ σε ένα απενεργοποιημένο στοιχείο.

<span class="d-inline-block" data-toggle="popover" data-content="Disabled popover">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

Χρήση

Ενεργοποίηση popovers μέσω JavaScript:

$('#example').popover(options)

Επιλογές

Οι επιλογές μπορούν να μεταβιβαστούν μέσω χαρακτηριστικών δεδομένων ή JavaScript. Για τα χαρακτηριστικά δεδομένων, προσθέστε το όνομα της επιλογής στο data-, όπως στο data-animation="".

Μέθοδοι

$().popover(options)

Αρχικοποιεί τα popover για μια συλλογή στοιχείων.

.popover('show')

Αποκαλύπτει το popover ενός στοιχείου. Επιστρέφει στον καλούντα πριν εμφανιστεί πραγματικά το popover (δηλαδή πριν συμβεί το shown.bs.popoverσυμβάν). Αυτό θεωρείται μια «χειροκίνητη» ενεργοποίηση του popover. Τα popover των οποίων τόσο ο τίτλος όσο και το περιεχόμενο είναι μηδενικού μήκους δεν εμφανίζονται ποτέ.

$('#element').popover('show')

.popover('hide')

Κρύβει το popover ενός στοιχείου. Επιστρέφει στον καλούντα πριν από την πραγματική απόκρυψη του popover (δηλαδή πριν συμβεί το hidden.bs.popoverσυμβάν). Αυτό θεωρείται μια «χειροκίνητη» ενεργοποίηση του popover.

$('#element').popover('hide')

.popover('toggle')

Εναλλάσσει το popover ενός στοιχείου. Επιστρέφει στον καλούντα πριν εμφανιστεί ή κρυφτεί πραγματικά το popover (δηλαδή πριν συμβεί το shown.bs.popoverή το hidden.bs.popoverσυμβάν). Αυτό θεωρείται μια «χειροκίνητη» ενεργοποίηση του popover.

$('#element').popover('toggle')

.popover('dispose')

Κρύβει και καταστρέφει το popover ενός στοιχείου. Τα popover που χρησιμοποιούν ανάθεση (τα οποία δημιουργούνται χρησιμοποιώντας την selectorεπιλογή ) δεν μπορούν να καταστραφούν μεμονωμένα στα στοιχεία ενεργοποίησης καταγωγής.

$('#element').popover('dispose')

.popover('enable')

Δίνει στο popover ενός στοιχείου τη δυνατότητα να εμφανίζεται. Τα popover είναι ενεργοποιημένα από προεπιλογή.

$('#element').popover('enable')

.popover('disable')

Καταργεί τη δυνατότητα εμφάνισης του popover ενός στοιχείου. Το popover θα μπορεί να εμφανιστεί μόνο εάν ενεργοποιηθεί ξανά.

$('#element').popover('disable')

.popover('toggleEnabled')

Εναλλάσσει τη δυνατότητα εμφάνισης ή απόκρυψης του popover ενός στοιχείου.

$('#element').popover('toggleEnabled')

.popover('update')

Ενημερώνει τη θέση του popover ενός στοιχείου.

$('#element').popover('update')

Εκδηλώσεις

$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})