Previous
Next

Προσθήκη Tooltip

Μεταβείτε στη σελίδα index.html . Θα προσθέσουμε τώρα ένα tooltip σε αυτήν τη σελίδα. Το tooltip θα προστεθεί στο κουμπί "Reserve Table" button που βρίσκεται στο jumbotron.

Θα ενημερώσουμε την ετικέτα  <a>  για το κουμπί ως εξής:

<a type="button" class="btn btn-warning btn-sm btn-block"
  data-toggle="tooltip" data-html="true" 
  title="Or Call us at <br><strong>+ 987 6543 2100</strong>"
  data-placement="bottom" href="#reserve-form">
  Reserve your baskets
</a>

Όπως μπορείτε να δείτε από τον κώδικα, προσθέτουμε  data-toggle, data-placement και title attribute στην <a> tag για να εισαγάγουμε ένα tooltip.
Το tooltip πρέπει να ενεργοποιηθεί προσθέτοντας έναν μικρό κώδικα Javascript στο κάτω μέρος της σελίδας ως εξής:

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

Το script προστίθεται αμέσως μετά τη γραμμή εισαγωγής του αρχείου  bootstrap.min.js .

Αυτός ο κώδικας θα δημιουργήσει μια σελίδα που εμφανίζεται ως εξής:

Previous
Next