Bootstrap 5: Popover

فهرست مطالب

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

ﺎﻫﺭﻭﺎﭘﺎﭘ

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

ﻢﯿﻨﮐ ﺩﺎﺠﯾﺍ 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>

تمامی حقوق محفوظ است. © BasicIT.org • 2023-2024