Πώς να δημιουργήσετε συμβουλές εργαλείων Bootstrap 5;

Η δημιουργία συμβουλών εργαλείων Bootstrap 5 είναι απλή, χρησιμοποιώντας τις κατηγορίες βοηθητικών προγραμμάτων και τη λειτουργικότητα JavaScript. Δείτε πώς μπορείτε να το πετύχετε:

Σήμανση HTML:

1. Προσθέστε το data-bs-toggle="tooltip" χαρακτηριστικό στο στοιχείο για το οποίο θέλετε να εμφανίσετε μια επεξήγηση εργαλείου. Αυτό θα μπορούσε να είναι ένα κουμπί, ένας σύνδεσμος ή οποιοδήποτε άλλο κατάλληλο στοιχείο.

```html

Παράδειγμα επεξήγησης εργαλείου

```

Εδώ, ο τίτλος της συμβουλής εργαλείου καθορίζεται απευθείας στη σήμανση του στοιχείου. Μπορείτε επίσης να ορίσετε προσαρμοσμένα χαρακτηριστικά δεδομένων, όπως «data-bs-title», ώστε να συμπεριλάβετε περιεχόμενο συμβουλής εργαλείου δυναμικά στον κώδικα JavaScript.

Σενάριο εκκίνησης:

2. Συμπεριλάβετε το πακέτο JavaScript του Bootstrap:

```html

```

Αυτό το σενάριο συνδυάζει τόσο το Popper όσο και το Bootstrap JS, απαραίτητα για τη σωστή λειτουργία επεξήγησης εργαλείου.

Διαμόρφωση JavaScript (Προαιρετικό):

Μπορείτε να προσαρμόσετε περαιτέρω τη συμπεριφορά συμβουλής εργαλείου χρησιμοποιώντας JavaScript. Το Bootstrap παρέχει την κλάση `Tooltip` για αλληλεπίδραση με τις συμβουλές εργαλείων μέσω προγραμματισμού.

`` Javascript

var tooltipTriggerList =[].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))

var tooltipList =tooltipTriggerList.map(function (tooltipTriggerEl) {

επιστροφή νέου bootstrap.Tooltip(tooltipTriggerEl)

})

```

Με την επανάληψη όλων των στοιχείων με το χαρακτηριστικό `data-bs-toggle="tooltip"`, αυτό το σενάριο προετοιμάζει μεμονωμένες συμβουλές εργαλείων, δίνοντας περισσότερο έλεγχο στη συμπεριφορά και τη δυνατότητα δυναμικής διαχείρισης των συμβουλών εργαλείων, π.χ. κατά την προσθήκη νέων κουμπιών στη σελίδα.

Τώρα, όταν τοποθετείτε το δείκτη του ποντικιού πάνω από ένα στοιχείο με καθορισμένη επεξήγηση εργαλείου, θα δείτε την επεξήγηση εργαλείου Bootstrap 5 με το παρεχόμενο περιεχόμενο να εμφανίζεται χωρίς επιπλέον κλάσεις CSS ή στυλ. Τοποθετείται αυτόματα σε σχέση με το στοιχείο στόχο χρησιμοποιώντας την έξυπνη μηχανή εντοπισμού θέσης του Bootstrap.