Popovers क्या हैं
एक popover एक element click होने पर एक title और content वाला एक छोटा floating box दिखाता है।
In this page:
Syntax
<button data-bs-toggle="popover" data-bs-title="Title" data-bs-content="Content">Click</button>
<script>
new bootstrap.Popover(element);
</script>Popovers
Popovers opt-in हैं: इन्हें JavaScript में new bootstrap.Popover(element) से initialise करें, और trigger पर data-bs-toggle="popover", data-bs-title, और data-bs-content set करें।
Placement data-bs-placement से चुना जाता है। ये positioning के लिए Popper इस्तेमाल करते हैं और default से click से trigger होते हैं।
Note:
performance reasons की वजह से Popovers और tooltips को manually initialise करना ज़रूरी है।
उदाहरण: Popovers
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="p-3">
<div class="container">
<button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here is some amazing content." data-bs-placement="right">Click for popover</button>
</div>
<script>
document.querySelectorAll('[data-bs-toggle="popover"]').forEach((el) => new bootstrap.Popover(el));
</script>
</body>
</html>Live Example
Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- इन्हें initialise करना भूल जाना
- disabled elements पर इन्हें इस्तेमाल करना
- popovers में critical info hide करना
चैप्टर सारांश
- Popovers को initialise करना ज़रूरी है
- data-bs-title और data-bs-content
- data-bs-placement positions करता है
- Default से Click trigger
🔒
Chapter Quiz — Complete all 8 topics to unlock
0/8 topics done
Complete these topics first: