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 μπορούν να ενεργοποιηθούν χάρη σε ένα στοιχείο μέσα σε ένα σκιερό 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')

Hides an element’s popover. Returns to the caller before the popover has actually been hidden (i.e. before the hidden.bs.popover event occurs). This is considered a “manual” triggering of the popover.

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

.popover('toggle')

Toggles an element’s popover. Returns to the caller before the popover has actually been shown or hidden (i.e. before the shown.bs.popover or hidden.bs.popover event occurs). This is considered a “manual” triggering of the popover.

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

.popover('dispose')

Hides and destroys an element’s popover. Popovers that use delegation (which are created using the selector option) cannot be individually destroyed on descendant trigger elements.

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

.popover('enable')

Gives an element’s popover the ability to be shown. Popovers are enabled by default.

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

.popover('disable')

Removes the ability for an element’s popover to be shown. The popover will only be able to be shown if it is re-enabled.

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

.popover('toggleEnabled')

Toggles the ability for an element’s popover to be shown or hidden.

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

.popover('update')

Updates the position of an element’s popover.

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

Events

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