Εργαλεία Ενδείξεων στο Bootstrap 5

\u5de5\u5177\u6a21\u7ec4

\u5de5\u5177\u6a21\u7ec4\u662f\u4e00\u4e2a\u5c0f\u7684\u5f39\u51fa\u6863\u6863\u3002\u5f53\u7528\u6237\u5c06\u9a84\u6307\u624b\u6307\u7ed9\u5143\u7d20\u4e0a\u65f6\u4f1a\u51fa\u73b0\uff1a

\u5982\u4f55\u521b\u5efa\u5de5\u5177\u6a21

\u5982\u8981\u521b\u5efa\u5de5\u5177\u6a21\uff0c\u8bf7\u5c06 data-bs-toggle="tooltip" \u5c5e\u6027\u6dfb\u52a0\u5230\u5143\u7d20\u3002

Χρησιμοποιήστε title \u5c5e\u6027\u6307\u5b9a\u5728\u5de5\u5177\u6a21\u4e2d\u6f14\u793a\u7684\u6587\u672c\uuff1a

<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="\u8fd9\u5f88\u6210\u73b0\!">\u8bf7\u6c14\u6d1e\u5728\u6211\u4e0a\!</button>

Σημείωση:}Τα tooltips πρέπει να�始化ιστούν με JavaScript για να λειτουργήσουν.

Το παρακάτω κείμενο θα ενεργοποιήσει όλα τα tooltips στο έγγραφο:

<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
}
</script>

Δοκιμάστε το προσωπικά

Θέση του εργαλείου αναβοσβήνωσης

By default, the tooltip will appear at the top of the element.

Χρησιμοποιήστε data-bs-placement Ρύθμιση ιδιότητας του εργαλείου αναβοσβήνωσης στη θέση κορμού, βάσης, αριστερά ή δεξιά του στοιχείου:

Παράδειγμα

<a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Τι υπέροχο!">Αναβοσβήνωση</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Τι υπέροχο!">Αναβοσβήνωση</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="left" title="Τι υπέροχο!">Αναβοσβήνωση</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" title="Τι υπέροχο!">Αναβοσβήνωση</a>

Δοκιμάστε το προσωπικά