Bootstrap 5: Popover

Πίνακας περιεχομένων

    Εμφάνιση πίνακα περιεχομένων

Popovers

Το στοιχείο Popover είναι παρόμοιο με τις συμβουλές εργαλείων. είναι ένα αναδυόμενο πλαίσιο που εμφανίζεται όταν ο χρήστης κάνει κλικ σε ένα στοιχείο. Η διαφορά είναι ότι το popover μπορεί να περιέχει πολύ περισσότερο περιεχόμενο.

Πώς να δημιουργήσετε ένα Popover

Για να δημιουργήσετε ένα popover, προσθέστε το χαρακτηριστικό data-bs-toggle="popover" σε ένα στοιχείο.

Χρησιμοποιήστε το χαρακτηριστικό title για να καθορίσετε το κείμενο κεφαλίδας του popover και χρησιμοποιήστε το χαρακτηριστικό data-bs-content για να καθορίσετε το κείμενο που θα πρέπει να εμφανίζεται μέσα στο σώμα του popover:

<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="Popover Header" data-bs-content="Some content inside the popover">Toggle popover</button>

Σημείωση: Τα popover πρέπει να αρχικοποιηθούν με JavaScript για να λειτουργήσουν.

Ο ακόλουθος κώδικας θα ενεργοποιήσει όλα τα popover στο έγγραφο:

Παράδειγμα

<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})
</script>

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h3>Popover Example</h3>
  
  <button type="button" class="btn btn-primary" data-bs-toggle="popover" title="Popover Header" data-bs-content="Some content inside the popover">
    Toggle popover
  </button>
</div>

<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})
</script>

</body>
</html>

Positioning Popovers

Από προεπιλογή, το popover θα εμφανίζεται στη δεξιά πλευρά του στοιχείου.

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

Παράδειγμα

<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="top" data-content="Content">Top</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="bottom" data-content="Content">Bottom</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="left" data-content="Content">Left</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="right" data-content="Content">Right</a>

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-5">
  <h3>Popover Positioning</h3>
  <p>Click on the links to see the popover in action:</p>
  <a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Content">Top</a>
  <a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Content">Bottom</a>
  <a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Content">Left</a>
  <a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Content">Right</a>
</div>

<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})
</script>

</body>
</html>

Σημείωση: Τα χαρακτηριστικά τοποθέτησης δεν λειτουργούν όπως περιμένετε, εάν δεν υπάρχει αρκετός χώρος για αυτά. Για παράδειγμα: εάν χρησιμοποιείτε την επάνω τοποθέτηση στο επάνω μέρος μιας σελίδας (όπου δεν υπάρχει χώρος για αυτήν), θα εμφανίσει το popover κάτω από το στοιχείο ή στα δεξιά (όπου υπάρχει χώρος για αυτήν).

Κλείσιμο Popovers

Από προεπιλογή, το popover κλείνει όταν κάνετε ξανά κλικ στο στοιχείο. Ωστόσο, μπορείτε να χρησιμοποιήσετε το χαρακτηριστικό data-bs-trigger="focus" το οποίο θα κλείσει το popover όταν κάνετε κλικ έξω από το στοιχείο:

Παράδειγμα

 <a href="#" title="Dismissible popover" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="Click anywhere in the document to close this popover">Click me</a>

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h3>Dismissible Popover</h3>
  
  <a href="#" title="Dismissible popover" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="Click anywhere in the document to close this popover">Click me</a>
</div>

<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})
</script>

</body>
</html>

Hoverable Popover

Συμβουλή: Εάν θέλετε να εμφανίζεται το popover όταν μετακινείτε το δείκτη του ποντικιού πάνω από το στοιχείο, χρησιμοποιήστε το χαρακτηριστικό data-bs-trigger με μια τιμή "hover":

Παράδειγμα

<a href="#" title="Header" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="Popover text">Hover over me</a>

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h3>Hoverable Popover</h3>
  
  <a href="#" title="Header" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="Popover text">Hover over me</a>
</div>

<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})
</script>

</body>
</html>