Tooltips क्या हैं
एक tooltip एक element hover या focus होने पर एक छोटा hint दिखाता है।
In this page:
Syntax
<button data-bs-toggle="tooltip" data-bs-title="Tooltip text">Hover</button>
<script>
new bootstrap.Tooltip(element);
</script>Tooltips
Popovers की तरह, tooltips opt-in हैं और new bootstrap.Tooltip(element) से initialise होना ज़रूरी है। Text को title attribute या data-bs-title में रखें और data-bs-placement से एक placement चुनें।
ये hover और focus पर appear होते हैं, इसलिए इन्हें छोटा रखें और कभी भी essential information इनमें hide न करें।
Note:
Disabled buttons पर tooltips को एक wrapper element चाहिए।
उदाहरण: Tooltips
<!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-outline-primary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top">Hover me</button>
<a href="#" class="ms-3" data-bs-toggle="tooltip" data-bs-title="A helpful hint">Link with tooltip</a>
</div>
<script>
document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach((el) => new bootstrap.Tooltip(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. #}
आम गलतियां
- Initialisation भूल जाना
- लंबा tooltip text
- सिर्फ tooltips में essential information रखना
चैप्टर सारांश
- Tooltips को initialise करना ज़रूरी है
- title या data-bs-title में Text
- Hover और focus triggers
- इन्हें छोटा रखें
🔒
Chapter Quiz — Complete all 8 topics to unlock
0/8 topics done
Complete these topics first: