Bootstrap 5: Popover

فهرست مطالب

    نمایش فهرست مطالب

ﺎﻫﺭﻭﺎﭘﺎﭘ

.ﺪﺷﺎﺑ ﻪﺘﺷﺍﺩ ﯼﺮﺘﺸﯿﺑ ﺭﺎﯿﺴﺑ ﯼﺍﻮﺘﺤﻣ ﺪﻧﺍﻮﺗ ﯽﻣ popover ﻪﮐ ﺖﺳﺍ ﻦﯾﺍ ﺕﻭﺎﻔﺗ .ﺩﻮﺷ ﯽﻣ ﺮﻫﺎﻇ

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

ﻢﯿﻨﮐ ﺩﺎﺠﯾﺍ Popover ﮏﯾ ﻪﻧﻮﮕﭼ

.ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ ﺮﺼﻨﻋ ﮏﯾ ﻪﺑ ﺍﺭ data-bs-toggle="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>

ﻪﺟﻮﺗ: ﺪﻧﻮﺷ ﻪﯿﻟﻭﺍ ﯽﻫﺩﺭﺍﺪﻘﻣ ﺖﭙﯾﺮﮑﺳﺍ ﺍﻭﺎﺟ ﺎﺑ ﺪﯾﺎﺑ ﺎﻫﺭﻭﺎﭘﺎﭘ ﻥﺩﺮﮐ

:ﺪﻨﮐ ﯽﻣ ﻝﺎﻌﻓ ﺍﺭ ﺪﻨﺳ ﯼﺎﻫﺭﻭﺎﭘﺎﭘ ﻡﺎﻤﺗ ﺮﯾﺯ ﺪﮐ

ﻝﺎﺜﻣ

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

ﯽﺑﺎﯾ ﺖﯿﻌﻗﻮﻣ ﯼﺎﻫﺭﻭﻮﭘﻮﭘ

.ﺩﻮﺷ ﯽﻣ ﺮﻫﺎﻇ ﺮﺼﻨﻋ ﺖﺳﺍﺭ ﺖﻤﺳ ﺭﺩ popover ،ﺽﺮﻓ ﺶﯿﭘ ﺭﻮﻃ ﻪﺑ

:ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ﺮﺼﻨﻋ ﺖﺳﺍﺭ ﺖﻤﺳ ﺎﯾ ﭗﭼ ﺖﻤﺳ ،ﻦﯿﯾﺎﭘ ،ﻻﺎﺑ ﺭﺩ 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>

ﻪﺟﻮﺗ: ﻥﺁ ﯼﺍﺮﺑ ﯽﻓﺎﮐ ﯼﺎﻀﻓ ﺮﮔﺍﯽﮔﮋﯾﻭ ،ﺪﺷﺎﺑ ﻪﺘﺷﺍﺪﻧ ﺩﻮﺟﻭ ﺎﻫu20

ﺎﻫﺭﻭﻮﭘﺎﭘ ﻥﺪﺷ ﻪﺘﺴﺑ

:ﺩﺪﻨﺑﯽﻣ ﺍﺭ 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>

ﺭﻭﺎﻨﺷ ﺭﻭﺎﭘﺎﭘ

ﻪﺘﮑﻧ: ﯽﻣ ﺮﮔﺍﯽﻣ ﺖﮐﺮﺣ ﺮﺼﻨﻋ ﯼﻭﺭ ﺍﺭ ﺱﻭﺎﻣ ﺮﮕﻧﺎﺸﻧ ﻪﮐ ﯽﻣﺎﮕﻨﻫ ﺪﯿ

ﻝﺎﺜﻣ

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