Source

Συμβουλές εργαλείων

Τεκμηρίωση και παραδείγματα για την προσθήκη προσαρμοσμένων συμβουλών εργαλείων εκκίνησης με CSS και JavaScript χρησιμοποιώντας CSS3 για κινούμενα σχέδια και χαρακτηριστικά δεδομένων για τοπική αποθήκευση τίτλων.

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

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

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

Τα έχεις όλα αυτά; Ωραία, ας δούμε πώς λειτουργούν με μερικά παραδείγματα.

Παράδειγμα: Ενεργοποιήστε τις συμβουλές εργαλείων παντού

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

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

Παραδείγματα

Τοποθετήστε το δείκτη του ποντικιού στους παρακάτω συνδέσμους για να δείτε συμβουλές εργαλείων:

Στενό παντελόνι επόμενου επιπέδου keffiyeh που μάλλον δεν το έχετε ακούσει. Photo booth γενειάδα ακατέργαστη τζιν letterpress vegan messenger τσάντα stumptown. Σεϊτάν από αγρόκτημα μέχρι τραπέζι, αμερικανικά ενδύματα βιώσιμης κινόα 8-bit της mcsweeney's έχουν ένα chambray βινυλίου terry richardson. Beard stumptown, ζακέτες banh mi lomo thundercats. Tofu βιοντίζελ Wiliamsburg marfa, τέσσερα loko mcsweeney's cleanse vegan chambray. Ένας πραγματικά ειρωνικός τεχνίτης , ανεξάρτητα από το keytar , σκηνικό από αγρόκτημα σε τραπέζι, με το twitter του Austin να χειρίζεται freegan cred raw τζιν καφέ μονής προέλευσης.

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

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
  Tooltip on left
</button>

Και με την προσθήκη προσαρμοσμένου HTML:

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

Χρήση

Η προσθήκη συμβουλής εργαλείου δημιουργεί περιεχόμενο και σήμανση κατά απαίτηση και από προεπιλογή τοποθετεί τις συμβουλές εργαλείου μετά το στοιχείο ενεργοποίησης τους.

Ενεργοποιήστε την επεξήγηση εργαλείου μέσω JavaScript:

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

Σήμανση

Η απαιτούμενη σήμανση για μια επεξήγηση εργαλείου είναι μόνο ένα dataχαρακτηριστικό και titleστο στοιχείο HTML θέλετε να έχετε μια επεξήγηση εργαλείου. Η παραγόμενη σήμανση μιας συμβουλής εργαλείου είναι μάλλον απλή, αν και απαιτεί μια θέση (από προεπιλογή, ρυθμισμένη topαπό το πρόσθετο).

Κάνοντας τις συμβουλές εργαλείων να λειτουργούν για χρήστες πληκτρολογίου και βοηθητικής τεχνολογίας

Θα πρέπει να προσθέτετε μόνο συμβουλές εργαλείων σε στοιχεία HTML που είναι παραδοσιακά εστιάσιμα στο πληκτρολόγιο και διαδραστικά (όπως συνδέσμους ή στοιχεία ελέγχου φορμών). Αν και τα αυθαίρετα στοιχεία HTML (όπως το <span>s) μπορούν να γίνουν εστιάσιμα προσθέτοντας το tabindex="0"χαρακτηριστικό, αυτό θα προσθέσει δυνητικά ενοχλητικές και μπερδεμένες θέσεις καρτελών σε μη διαδραστικά στοιχεία για χρήστες πληκτρολογίου. Επιπλέον, οι περισσότερες υποστηρικτικές τεχνολογίες επί του παρόντος δεν ανακοινώνουν την επεξήγηση εργαλείου σε αυτήν την κατάσταση.

Επιπλέον, μην βασίζεστε αποκλειστικά hoverως το έναυσμα για την επεξήγηση εργαλείου σας, καθώς αυτό θα καταστήσει αδύνατο να ενεργοποιηθούν οι συμβουλές εργαλείων σας για χρήστες πληκτρολογίου.

<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip bs-tooltip-top" role="tooltip">
  <div class="arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

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

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

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

Επιλογές

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

Ονομα Τύπος Προκαθορισμένο Περιγραφή
κινουμένων σχεδίων boolean αληθής Εφαρμόστε μια μετάβαση εξαφάνισης CSS στην επεξήγηση εργαλείου
δοχείο χορδή | στοιχείο | ψευδής ψευδής

Προσθέτει την επεξήγηση εργαλείου σε ένα συγκεκριμένο στοιχείο. Παράδειγμα: container: 'body'. Αυτή η επιλογή είναι ιδιαίτερα χρήσιμη καθώς σας επιτρέπει να τοποθετήσετε την επεξήγηση εργαλείου στη ροή του εγγράφου κοντά στο στοιχείο ενεργοποίησης - κάτι που θα εμποδίσει την επεξήγηση εργαλείου να μετακινηθεί μακριά από το στοιχείο ενεργοποίησης κατά τη διάρκεια μιας αλλαγής μεγέθους παραθύρου.

καθυστέρηση αριθμός | αντικείμενο 0

Καθυστέρηση εμφάνισης και απόκρυψης της επεξήγησης εργαλείου (ms) - δεν ισχύει για τον τύπο χειροκίνητης σκανδάλης

Εάν παρέχεται ένας αριθμός, εφαρμόζεται καθυστέρηση και για την απόκρυψη/εμφάνιση

Η δομή του αντικειμένου είναι:delay: { "show": 500, "hide": 100 }

html boolean ψευδής

Να επιτρέπεται η HTML στην επεξήγηση εργαλείου.

Εάν είναι αληθές, οι ετικέτες HTML στην επεξήγηση εργαλείου titleθα αποδοθούν στην επεξήγηση εργαλείου. Εάν είναι false, η μέθοδος του jQuery textθα χρησιμοποιηθεί για την εισαγωγή περιεχομένου στο DOM.

Χρησιμοποιήστε κείμενο εάν ανησυχείτε για επιθέσεις XSS.

τοποθέτηση χορδή | λειτουργία 'μπλουζα'

Πώς να τοποθετήσετε την επεξήγηση εργαλείου - αυτόματη | κορυφή | κάτω | αριστερά | σωστά.
Όταν autoκαθοριστεί, θα επαναπροσανατολίσει δυναμικά την επεξήγηση εργαλείου.

Όταν μια συνάρτηση χρησιμοποιείται για τον προσδιορισμό της τοποθέτησης, καλείται με πρώτο όρισμα τον κόμβο DOM επεξήγησης εργαλείου και δεύτερο τον κόμβο DOM στοιχείο ενεργοποίησης. Το thisπεριβάλλον ορίζεται στην παρουσία συμβουλής εργαλείου.

εκλέκτορας χορδή | ψευδής ψευδής Εάν παρέχεται ένας επιλογέας, τα αντικείμενα συμβουλής εργαλείου θα εκχωρηθούν στους καθορισμένους στόχους. Στην πράξη, αυτό χρησιμοποιείται για να επιτρέψει στο δυναμικό περιεχόμενο HTML να προστεθούν popover. Δείτε αυτό και ένα ενημερωτικό παράδειγμα .
πρότυπο σειρά '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

Βάση HTML για χρήση κατά τη δημιουργία της επεξήγησης εργαλείου.

Η συμβουλή εργαλείου titleθα εγχυθεί στο .tooltip-inner.

.arrowθα γίνει το βέλος της επεξήγησης εργαλείου.

Το πιο εξωτερικό στοιχείο περιτυλίγματος θα πρέπει να έχει την .tooltipκλάση και role="tooltip".

τίτλος χορδή | στοιχείο | λειτουργία ''

Προεπιλεγμένη τιμή τίτλου εάν titleτο χαρακτηριστικό δεν υπάρχει.

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

δώσει το έναυσμα για σειρά "εστίαση αιώρησης"

Πώς ενεργοποιείται η συμβουλή εργαλείου - κάντε κλικ στο | αιωρούνται | εστίαση | εγχειρίδιο. Μπορείτε να περάσετε πολλαπλούς ερεθισμούς. χωρίστε τα με ένα κενό.

'manual'υποδηλώνει ότι η επεξήγηση εργαλείου θα ενεργοποιηθεί μέσω προγραμματισμού μέσω των μεθόδων και .tooltip('show'); αυτή η τιμή δεν μπορεί να συνδυαστεί με κανένα άλλο έναυσμα..tooltip('hide').tooltip('toggle')

'hover'από μόνη της θα οδηγήσει σε συμβουλές εργαλείων που δεν μπορούν να ενεργοποιηθούν μέσω του πληκτρολογίου και θα πρέπει να χρησιμοποιούνται μόνο εάν υπάρχουν εναλλακτικές μέθοδοι για τη μετάδοση των ίδιων πληροφοριών για τους χρήστες του πληκτρολογίου.

αντισταθμίζεται αριθμός | σειρά 0 Μετατόπιση της επεξήγησης εργαλείου σε σχέση με τον στόχο της. Για περισσότερες πληροφορίες, ανατρέξτε στα έγγραφα μετατόπισης του Popper.js .
εναλλακτική τοποθέτηση χορδή | πίνακας 'αναρρίπτω' Επιτρέψτε να καθορίσετε ποια θέση θα χρησιμοποιήσει ο Popper στην εναλλακτική. Για περισσότερες πληροφορίες, ανατρέξτε στα έγγραφα συμπεριφοράς του Popper.js
Όριο χορδή | στοιχείο 'scrollParent' Όριο περιορισμού υπερχείλισης της επεξήγησης εργαλείου. Αποδέχεται τις τιμές του 'viewport', 'window', 'scrollParent'ή μιας αναφοράς HTMLElement (μόνο JavaScript). Για περισσότερες πληροφορίες, ανατρέξτε στα έγγραφα preventOverflow του Popper.js .

Χαρακτηριστικά δεδομένων για μεμονωμένες συμβουλές εργαλείων

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

Μέθοδοι

Ασύγχρονες μέθοδοι και μεταβάσεις

Όλες οι μέθοδοι API είναι ασύγχρονες και ξεκινούν μια μετάβαση . Επιστρέφουν στον καλούντα μόλις ξεκινήσει η μετάβαση αλλά πριν τελειώσει . Επιπλέον, μια κλήση μεθόδου σε ένα στοιχείο μετάβασης θα αγνοηθεί .

Δείτε την τεκμηρίωση JavaScript για περισσότερες πληροφορίες.

$().tooltip(options)

Προσαρτά έναν χειριστή συμβουλών εργαλείου σε μια συλλογή στοιχείων.

.tooltip('show')

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

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

.tooltip('hide')

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

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

.tooltip('toggle')

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

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

.tooltip('dispose')

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

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

.tooltip('enable')

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

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

.tooltip('disable')

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

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

.tooltip('toggleEnabled')

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

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

.tooltip('update')

Ενημερώνει τη θέση της επεξήγησης εργαλείου ενός στοιχείου.

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

Εκδηλώσεις

Τύπος συμβάντος Περιγραφή
show.bs.tooltip Αυτό το συμβάν ενεργοποιείται αμέσως όταν showκαλείται η μέθοδος παρουσίας.
εμφανίζεται.bs.επεξήγηση εργαλείου Αυτό το συμβάν ενεργοποιείται όταν η επεξήγηση εργαλείου έχει γίνει ορατή στον χρήστη (θα περιμένει να ολοκληρωθούν οι μεταβάσεις CSS).
απόκρυψη.bs.επεξήγηση εργαλείου Αυτό το συμβάν ενεργοποιείται αμέσως μετά την hideκλήση της μεθόδου παρουσίας.
hidden.bs.tooltip Αυτό το συμβάν ενεργοποιείται όταν ολοκληρωθεί η απόκρυψη της επεξήγησης εργαλείου από τον χρήστη (θα περιμένει να ολοκληρωθούν οι μεταβάσεις CSS).
εισήχθη.bs.επεξήγηση εργαλείου Αυτό το συμβάν ενεργοποιείται μετά το show.bs.tooltipσυμβάν όταν το πρότυπο συμβουλής εργαλείου έχει προστεθεί στο DOM.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})