Bootstrap 5: Popover


Sisällysluettelo

    Näytä sisällysluettelo

Popovers

Popover-komponentti on samanlainen kuin työkaluvihjeet; se on ponnahdusikkuna, joka tulee näkyviin, kun käyttäjä napsauttaa elementtiä. Erona on, että ponnahdusikkuna voi sisältää paljon enemmän sisältöä.


Kuinka luoda popover

Luo ponnahdusikkuna lisäämällä data-bs-toggle="popover"-attribuutti elementtiin.

Määritä ponnahdusikkunan otsikkoteksti title-attribuutilla ja data-bs-content-attribuutilla määrittääksesi tekstin, joka näytetään ponnahdusikkunan rungossa:

<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>

Huomaa: Ponnahdusikkunat on alustettava JavaScriptillä toimiakseen.

Seuraava koodi ottaa käyttöön kaikki ponnahdusikkunat asiakirjassa:

Esimerkki

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

Kokeile itse →

<!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>

Ponnahdusikkunoiden sijoittaminen

Oletuksena ponnahdusikkuna näkyy elementin oikealla puolella.

Käytä data-bs-placement-attribuuttia asettaaksesi ponnahdusikkunan sijainnin elementin ylä-, ala-, vasemmalle tai oikealle puolelle:

Esimerkki

<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>

Kokeile itse →

<!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>

Huomaa: Sijoittelun määritteet eivät toimi odotetulla tavalla, jos niille ei ole tarpeeksi tilaa. Esimerkki: jos käytät sivun yläreunassa olevaa ylintä sijoittelua (missä sille ei ole tilaa), se näyttää sen sijaan ponnahdusikkunan elementin alapuolella tai oikealla (missä sille on tilaa).

Popoverien sulkeminen

Oletuksena ponnahdusikkuna sulkeutuu, kun napsautat elementtiä uudelleen. Voit kuitenkin käyttää data-bs-trigger="focus"-attribuuttia, joka sulkee ponnahdusikkunan, kun klikkaat elementin ulkopuolella:

Esimerkki

 <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>

Kokeile itse →

<!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

Vinkki: Jos haluat ponnahdusikkunan näkyvän, kun siirrät hiiren osoittimen elementin päälle, käytä data-bs-trigger-attribuuttia arvo "hover:

Esimerkki

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

Kokeile itse →

<!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>