Bootstrap 5 ตูตอรีอลเครื่องมือชี้แจง
টুল্টিপ
টুল্টিপ কম্পোনেন্ট একটি ছোটখাটো ফ্লক্সবক্স, যা যখন ব্যবহারকারী এলিমেন্টের ওপর মাউস পথওয়ার্ড করে, তখন দেখা যায়:
কিভাবে টুল্টিপ তৈরি করা হয়
টুল্টিপ তৈরির জন্য, data-bs-toggle="tooltip" এই প্রতিশব্দ এলিমেন্টে যোগ করুন。
ব্যবহার করুন title টুল্টিপ-এ দেখানো টেক্সট নির্দিষ্ট করতে প্রতিশব্দ সংজ্ঞায়িত করুন:
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="অত্যন্ত ভালো!">আমার ওপর মাউস পথওয়ার্ড করুন!</button>
মন্তব্য:টুলটিপপি জাভাস্ক্রিপ্টের মাধ্যমে প্রথমে ইনিশিয়ালাইজ করা উচিত যাতে এটি কাজ করে।
নিম্নলিখিত কোডটি ডকুমেন্টের সকল টুলটিপপিকে সক্ষম করবে:
<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>
টুলটিপপি স্থানান্তর
ডিফল্টে, টুলটিপপি এলিমেন্টের শীর্ষে দেখা যাবে。
ব্যবহার করুন data-bs-placement এলিমেন্টের শীর্ষ, নীচে, ডানদিকে বা বামদিকে টুলটিপপির স্থান নির্ধারণ করুন:
উদাহরণ
<a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="অত্যন্ত ভালো!">হভার</a> <a href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="অত্যন্ত ভালো!">হভার</a> <a href="#" data-bs-toggle="tooltip" data-bs-placement="left" title="অত্যন্ত ভালো!">হভার</a> <a href="#" data-bs-toggle="tooltip" data-bs-placement="right" title="অত্যন্ত ভালো!">হভার</a>
