বুটস্ট্রাপ ৫ এ টুলটিপ এবং পপওভার এমন দুটি জনপ্রিয় উপাদান যা ইন্টারেকটিভ ইউজার ইন্টারফেস তৈরি করতে সাহায্য করে। এগুলি মূলত ইউজারকে অতিরিক্ত তথ্য প্রদর্শনের জন্য ব্যবহৃত হয়, যেমন একটি বাটনের উপর হভার করলে কিছু তথ্য দেখানো, বা একটি এলিমেন্টে ক্লিক করলে অতিরিক্ত কন্টেন্ট দেখানো।
টুলটিপ হল একটি ছোট তথ্য বাক্স যা ব্যবহারকারীর একটি ইন্টারেক্টিভ এলিমেন্ট (যেমন একটি বাটন বা লিঙ্ক) এর উপরে হোভার করলে প্রদর্শিত হয়। এটি সাধারণত এলিমেন্টের উপর কিছু অতিরিক্ত তথ্য প্রদর্শন করে যা সরাসরি উপাদানটির সাথে সম্পর্কিত।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Tooltip Example</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Tooltip Example -->
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="এটি একটি টুলটিপ!">
হোভার করুন
</button>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
<script>
// টুলটিপ ইনিশিয়ালাইজ করা
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>
</body>
</html>
এখানে:
data-bs-toggle="tooltip": এটি নির্দেশ করে যে এই উপাদানটির জন্য টুলটিপ সক্রিয় হবে।title: টুলটিপে যে টেক্সটটি প্রদর্শিত হবে তা এখানে উল্লেখ করা হয়।data-bs-placement: টুলটিপের অবস্থান নির্দেশ করে (যেমন, top, bottom, left, right)।পপওভার টুলটিপের মতই কাজ করে, তবে এটি আরো বড় এবং এর মধ্যে কন্টেন্ট যেমন টেক্সট, লিঙ্ক, ছবি বা ফর্মও থাকতে পারে। পপওভার সাধারণত বাটন বা লিঙ্কের উপরে ক্লিক করলে বা হোভার করলে প্রদর্শিত হয়। এটি অনেক বেশি কাস্টমাইজযোগ্য এবং এতে টুলটিপের তুলনায় বেশি তথ্য প্রদর্শন করা যায়।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Popover Example</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Popover Example -->
<button type="button" class="btn btn-lg btn-primary" data-bs-toggle="popover" title="পপওভার শিরোনাম" data-bs-content="এটি একটি পপওভার কন্টেন্ট। আপনি এখানে আরো তথ্য বা লিঙ্ক যোগ করতে পারেন।">
পপওভার দেখান
</button>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
<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>
এখানে:
data-bs-toggle="popover": এটি নির্দেশ করে যে উপাদানটির জন্য পপওভার সক্রিয় হবে।title: পপওভারের শিরোনাম।data-bs-content: পপওভারে যে কন্টেন্টটি দেখানো হবে তা এখানে লেখা হয়।বুটস্ট্রাপ ৫ এর টুলটিপ এবং পপওভার দুটি শক্তিশালী উপাদান যা আপনার ওয়েবসাইটে অতিরিক্ত তথ্য প্রদর্শন করতে সহায়তা করে। টুলটিপ সাধারণত ছোট তথ্য প্রদর্শন করে, যেখানে পপওভার আরও কাস্টমাইজযোগ্য এবং এতে বড় কন্টেন্ট রাখা যায়। উভয় উপাদানই ব্যবহারকারীকে একটি সুন্দর ও ইন্টারেকটিভ এক্সপিরিয়েন্স প্রদান করতে সাহায্য করে।
বুটস্ট্রাপ ৫ এ টুলটিপ (Tooltip) একটি ছোট পপ-আপ যা সাধারণত একটি এলিমেন্টের উপর মাউস রেখে বা ফোকাস করার পর দেখানো হয়। এটি ব্যবহারকারীকে সেই এলিমেন্টের সম্পর্কে অতিরিক্ত তথ্য প্রদান করতে সাহায্য করে। টুলটিপ সাধারণত আইকন, লিঙ্ক, বা বাটন এর সাথে যুক্ত থাকে এবং একটি ছোট পরিসরে অতিরিক্ত তথ্য দেখানোর জন্য ব্যবহৃত হয়।
বুটস্ট্রাপ ৫ এ টুলটিপ ব্যবহার করার জন্য, আপনি data-bs-toggle="tooltip" অ্যাট্রিবিউট ব্যবহার করবেন এবং টুলটিপের কন্টেন্ট title অ্যাট্রিবিউটের মাধ্যমে দেবেন। আপনি আরও কাস্টমাইজেশন করতে পারেন, যেমন টুলটিপের অবস্থান পরিবর্তন, কালার, এবং স্টাইল।
বুটস্ট্রাপ ৫ এ টুলটিপ ব্যবহারের জন্য প্রথমে JavaScript ফাইলটি ইনক্লুড করতে হয় এবং তারপর টুলটিপ ইনিশিয়েট করতে হয়। নিচে একটি উদাহরণ দেওয়া হল:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tooltip Example</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" title="এটি একটি টুলটিপ">
টুলটিপ দেখান
</button>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
<script>
// টুলটিপ ইনিশিয়েট করা
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl);
});
</script>
</body>
</html>
এখানে:
data-bs-toggle="tooltip": এই অ্যাট্রিবিউটটি ব্যবহার করে বুটস্ট্রাপ টুলটিপ সক্রিয় করা হয়।title="এটি একটি টুলটিপ": টুলটিপের কন্টেন্ট (এটি ব্যবহারকারী যখন এলিমেন্টের উপর মাউস রেখে যাবে তখন প্রদর্শিত হবে)।বুটস্ট্রাপ ৫ আপনাকে টুলটিপ কাস্টমাইজ করার জন্য বেশ কিছু অপশন দেয়। আপনি টুলটিপের অবস্থান, কালার, টাইপ ইত্যাদি কাস্টমাইজ করতে পারেন।
টুলটিপের অবস্থান আপনি data-bs-placement অ্যাট্রিবিউটের মাধ্যমে পরিবর্তন করতে পারেন। এর জন্য চারটি মৌলিক অবস্থান রয়েছে:
<button type="button" class="btn btn-info" data-bs-toggle="tooltip" title="এটি উপরে টুলটিপ" data-bs-placement="top">
উপরে টুলটিপ
</button>
<button type="button" class="btn btn-info" data-bs-toggle="tooltip" title="এটি নীচে টুলটিপ" data-bs-placement="bottom">
নীচে টুলটিপ
</button>
<button type="button" class="btn btn-info" data-bs-toggle="tooltip" title="এটি বামে টুলটিপ" data-bs-placement="left">
বামে টুলটিপ
</button>
<button type="button" class="btn btn-info" data-bs-toggle="tooltip" title="এটি ডানে টুলটিপ" data-bs-placement="right">
ডানে টুলটিপ
</button>
টুলটিপের রঙ, সীমানা, ফন্ট সাইজ ইত্যাদি কাস্টমাইজ করতে আপনি CSS ব্যবহার করতে পারেন। উদাহরণস্বরূপ, টুলটিপের ব্যাকগ্রাউন্ড রঙ পরিবর্তন করা:
<style>
.tooltip-inner {
background-color: #ff5733; /* টুলটিপের ব্যাকগ্রাউন্ড রঙ */
color: white; /* টুলটিপের লেখার রঙ */
font-size: 1.2rem; /* ফন্ট সাইজ */
}
.tooltip-arrow {
border-top-color: #ff5733; /* টুলটিপের তীরের রঙ */
}
</style>
এই CSS কোডটি টুলটিপের ব্যাকগ্রাউন্ড রঙ এবং লেখার রঙ পরিবর্তন করবে, সাথে টুলটিপের তীরের রঙও কাস্টমাইজ করা হবে।
টুলটিপের দেখানোর সময় এবং হিডিং সময় কাস্টমাইজ করা সম্ভব। এটি delay অপশনের মাধ্যমে করা যেতে পারে।
<button type="button" class="btn btn-warning" data-bs-toggle="tooltip" title="এটি ডিলে টুলটিপ" data-bs-delay='{"show": 500, "hide": 100}'>
ডিলে টুলটিপ
</button>
এখানে:
show: টুলটিপ দেখানোর আগে বিলম্বের সময় (মিলিসেকেন্ডে)।hide: টুলটিপ হিড করার আগে বিলম্বের সময় (মিলিসেকেন্ডে)।বুটস্ট্রাপ ৫ এ টুলটিপ একটি শক্তিশালী এবং কাস্টমাইজযোগ্য উপাদান, যা আপনার ওয়েবসাইটে অতিরিক্ত তথ্য প্রদর্শন করতে সহায়তা করে। আপনি এটি সোজা ইনিশিয়েট করতে পারেন এবং CSS ও JavaScript-এর মাধ্যমে এর অবস্থান, রঙ, টাইপ ইত্যাদি কাস্টমাইজ করতে পারেন।
বুটস্ট্রাপ ৫ এ টুলটিপ (Tooltip) হলো একটি ছোট পপ-আপ উইন্ডো যা ব্যবহারকারীদের জন্য একটি অতিরিক্ত বর্ণনা বা সাহায্য প্রদর্শন করে, যখন তারা একটি উপাদানের উপর হোভার বা ফোকাস করেন। টুলটিপের পজিশন এবং অ্যানিমেশন কাস্টমাইজ করা খুবই সহজ। আপনি টুলটিপের অবস্থান, অ্যানিমেশন ইফেক্ট এবং অন্যান্য প্যারামিটার কনফিগার করতে পারেন বুটস্ট্রাপের বিল্ট-ইন অপশন দিয়ে।
বুটস্ট্রাপ ৫ এ টুলটিপের পজিশন কনফিগার করতে আপনি data-bs-placement অ্যাট্রিবিউট ব্যবহার করতে পারেন। এটি টুলটিপের অবস্থান নির্ধারণ করে। টুলটিপের অবস্থান সাধারণত উপরের, নিচের, ডান অথবা বাম দিকে হতে পারে।
top: টুলটিপ উপরে প্রদর্শিত হবে।bottom: টুলটিপ নিচে প্রদর্শিত হবে।left: টুলটিপ বাম পাশে প্রদর্শিত হবে।right: টুলটিপ ডান পাশে প্রদর্শিত হবে।<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tooltip Position Example</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Button with Tooltip -->
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="উপর থেকে টুলটিপ">
উপরের টুলটিপ
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="নিচ থেকে টুলটিপ">
নিচের টুলটিপ
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="বামে টুলটিপ">
বাম টুলটিপ
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="ডানে টুলটিপ">
ডান টুলটিপ
</button>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
<script>
// Enable tooltips
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl);
});
</script>
</body>
</html>
বুটস্ট্রাপ ৫ এ টুলটিপের জন্য অ্যানিমেশন যুক্ত করা সহজ। ডিফল্টভাবে, টুলটিপগুলো এক ধরনের ফেড-ইন এবং ফেড-আউট অ্যানিমেশন প্রদর্শন করে, কিন্তু আপনি চাইলে এটিকে কাস্টমাইজ করতে পারেন। টুলটিপের অ্যানিমেশন কনফিগার করতে data-bs-animation অ্যাট্রিবিউট ব্যবহার করতে পারেন।
true: টুলটিপে অ্যানিমেশন থাকবে (ডিফল্ট মান)।false: অ্যানিমেশন বন্ধ থাকবে।<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tooltip Animation Example</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Button with Tooltip without animation -->
<button type="button" class="btn btn-info" data-bs-toggle="tooltip" data-bs-placement="top" title="অ্যানিমেশন ছাড়া টুলটিপ" data-bs-animation="false">
অ্যানিমেশন ছাড়া টুলটিপ
</button>
<!-- Button with Tooltip with animation -->
<button type="button" class="btn btn-success" data-bs-toggle="tooltip" data-bs-placement="top" title="অ্যানিমেশন সহ টুলটিপ">
অ্যানিমেশন সহ টুলটিপ
</button>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
<script>
// Enable tooltips
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl);
});
</script>
</body>
</html>
আপনি আরও কিছু কাস্টম অপশন ব্যবহার করতে পারেন টুলটিপের আচরণ এবং স্টাইল কাস্টমাইজ করার জন্য:
delay: টুলটিপ প্রদর্শন এবং লুকানোর জন্য কিছু সময়ের বিলম্ব করতে ব্যবহার করা হয়। উদাহরণস্বরূপ, data-bs-delay="500" দিয়ে ৫০০ মিলিসেকেন্ড বিলম্ব করা যায়।
<button type="button" class="btn btn-warning" data-bs-toggle="tooltip" data-bs-delay="500" title="টুলটিপে বিলম্ব">
বিলম্বিত টুলটিপ
</button>
html: আপনি টুলটিপের কন্টেন্টে HTML ব্যবহার করতে চাইলে data-bs-html="true" ব্যবহার করতে পারেন। এর মাধ্যমে আপনি টুলটিপে লিঙ্ক, ইমেজ বা অন্য HTML উপাদান যুক্ত করতে পারবেন।
<button type="button" class="btn btn-danger" data-bs-toggle="tooltip" data-bs-html="true" title="<strong>HTML টুলটিপ</strong>">
HTML টুলটিপ
</button>
বুটস্ট্রাপ ৫ এর টুলটিপগুলি খুবই কাস্টমাইজেবল, এবং এর পজিশন ও অ্যানিমেশন সেটিংস খুবই সহজভাবে পরিবর্তনযোগ্য। আপনি টুলটিপের অবস্থান (উপর, নিচ, বাম, ডান) এবং অ্যানিমেশন স্টাইল (ফেড ইন/আউট) কাস্টমাইজ করতে পারেন। এগুলোর মাধ্যমে আপনি ব্যবহারকারীর অভিজ্ঞতা আরও উন্নত করতে পারেন।
বুটস্ট্রাপ ৫ এ পপওভার হল একটি ছোট ইনফরমেশন উইন্ডো যা ব্যবহারকারীকে অতিরিক্ত তথ্য দেখানোর জন্য ব্যবহার করা হয়। এটি সাধারণত কোনো বাটন বা লিঙ্কের উপর হোভার বা ক্লিক করলে প্রদর্শিত হয় এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করে। পপওভার খুবই সহজে কাস্টমাইজযোগ্য এবং এটি বিভিন্ন কন্টেন্ট (টেক্সট, ফর্ম, ছবি ইত্যাদি) প্রদর্শন করতে পারে।
বুটস্ট্রাপ ৫ এ পপওভার তৈরি এবং কাস্টমাইজ করা খুবই সহজ এবং এতে আপনি বিভিন্ন কনফিগারেশন অপশন ব্যবহার করে স্টাইল ও আচরণ নিয়ন্ত্রণ করতে পারেন।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>পপওভার উদাহরণ</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- পপওভার টগল বাটন -->
<button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-placement="top" title="পপওভার শিরোনাম" data-bs-content="এটি একটি পপওভার কন্টেন্ট।">
পপওভার দেখুন
</button>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
<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>
data-bs-toggle="popover": এই অ্যাট্রিবিউটটি বাটনটিকে পপওভার টগল করার জন্য কনফিগার করে।data-bs-placement="top": এই অ্যাট্রিবিউটটি পপওভারের অবস্থান নির্ধারণ করে। এখানে top অর্থাৎ পপওভারটি বাটনের উপরে প্রদর্শিত হবে। আপনি bottom, left, অথবা right ব্যবহার করতে পারেন।title: পপওভারের শিরোনাম।data-bs-content: পপওভারের মূল কন্টেন্ট বা তথ্য।bootstrap.Popover() ফাংশন ব্যবহার করা হয়। এই স্ক্রিপ্টটি পপওভার চালু করতে পপওভার টগল বাটনের জন্য একটি ইনস্ট্যান্স তৈরি করে।পপওভার কাস্টমাইজ করতে আপনি বিভিন্ন কনফিগারেশন অ্যাট্রিবিউট ব্যবহার করতে পারেন, যেমন পপওভারের অবস্থান, শো/হাইড হওয়ার সময়, ট্রিগার ইভেন্ট এবং পপওভারের কন্টেন্ট।
পপওভারটি কিভাবে প্রদর্শিত হবে তা নিয়ন্ত্রণ করতে data-bs-trigger ব্যবহার করা হয়। এই অ্যাট্রিবিউটটি পপওভার কিভাবে টগল হবে তা নির্ধারণ করে, যেমন হোভার, ক্লিক ইত্যাদি।
hover: পপওভার হোভার করার সাথে সাথে প্রদর্শিত হবে।focus: ইনপুট ফিল্ড বা বাটনে ফোকাস করলে পপওভার প্রদর্শিত হবে।click: বাটনে ক্লিক করলে পপওভার প্রদর্শিত হবে।<button type="button" class="btn btn-success" data-bs-toggle="popover" data-bs-trigger="click" data-bs-placement="bottom" title="পপওভার শিরোনাম" data-bs-content="এটি একটি কাস্টমাইজড পপওভার কন্টেন্ট।">
পপওভার ক্লিক করুন
</button>
পপওভারের কন্টেন্ট হিসাবে আপনি HTML কন্টেন্টও ব্যবহার করতে পারেন। যেমন লিঙ্ক, বাটন, ইমেজ ইত্যাদি।
<button type="button" class="btn btn-info" data-bs-toggle="popover" data-bs-placement="top" title="লিঙ্ক সহ পপওভার" data-bs-content="<a href='#'>এই লিঙ্কে ক্লিক করুন</a>">
পপওভার দেখুন
</button>
আপনি যদি কোন নির্দিষ্ট পপওভার বন্ধ করতে চান, তবে dispose() মেথড ব্যবহার করতে পারেন:
var popover = new bootstrap.Popover(document.querySelector('.btn-info'));
popover.dispose(); // পপওভার বন্ধ করবে
বুটস্ট্রাপ ৫ এ পপওভার তৈরি এবং কাস্টমাইজ করা অত্যন্ত সহজ। আপনি কনফিগারেশন অ্যাট্রিবিউট এবং JavaScript মেথড ব্যবহার করে পপওভারের আচরণ, কন্টেন্ট, অবস্থান ইত্যাদি নিয়ন্ত্রণ করতে পারেন। এটি একটি দারুণ টুল যা ব্যবহারকারীর জন্য ইনফরমেশন প্রদর্শনকে আরও ইন্টারেক্টিভ এবং রেসপন্সিভ করে তোলে।
বুটস্ট্রাপ ৫ এ Tooltip এবং Popover হলো দুইটি পপ-আপ ইন্টারফেস উপাদান, যেগুলি ব্যবহারকারীর কার্যক্রমে ইনফরমেশন বা এক্সট্রা কন্টেন্ট প্রদর্শন করতে সহায়ক। আপনি যখন টুলটিপ বা পোপওভার ব্যবহার করেন, তখন তাদের সাথে বিভিন্ন ইভেন্ট হ্যান্ডলিং করতে পারবেন, যেমন: show, shown, hide, hidden ইত্যাদি।
এখানে, আমরা টুলটিপ এবং পোপওভার উভয়টির জন্য ইভেন্ট হ্যান্ডলিংয়ের পদ্ধতি নিয়ে আলোচনা করব।
বুটস্ট্রাপ ৫ এ Tooltip কাস্টমাইজ করার জন্য বেশ কিছু ইভেন্ট ব্যবহার করা যেতে পারে। এগুলো হল:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tooltip Events Example</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<button type="button" class="btn btn-primary" id="tooltipButton" data-bs-toggle="tooltip" title="এটি একটি টুলটিপ">
টুলটিপ দেখুন
</button>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
<script>
var tooltipButton = document.getElementById('tooltipButton');
var tooltip = new bootstrap.Tooltip(tooltipButton);
// Tooltip শো হওয়ার আগে ইভেন্ট
tooltipButton.addEventListener('show.bs.tooltip', function () {
console.log('টুলটিপ শো হওয়ার আগে');
});
// Tooltip শো হওয়ার পর ইভেন্ট
tooltipButton.addEventListener('shown.bs.tooltip', function () {
console.log('টুলটিপ শো হয়ে গেছে');
});
// Tooltip হাইড হওয়ার আগে ইভেন্ট
tooltipButton.addEventListener('hide.bs.tooltip', function () {
console.log('টুলটিপ হাইড হওয়ার আগে');
});
// Tooltip হাইড হওয়ার পর ইভেন্ট
tooltipButton.addEventListener('hidden.bs.tooltip', function () {
console.log('টুলটিপ হাইড হয়ে গেছে');
});
</script>
</body>
</html>
এখানে, টুলটিপের শো এবং হাইড হওয়ার আগের এবং পরের ইভেন্টগুলো হ্যান্ডল করা হয়েছে এবং কনসোলে লগ করা হয়েছে।
Popover বুটস্ট্রাপের আরেকটি পপ-আপ উপাদান যা টুলটিপের মতো কিন্তু আরো বড় এবং বিস্তারিত কন্টেন্ট দেখাতে সহায়ক। Popover এরও কিছু ইভেন্ট রয়েছে, যেমন:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Popover Events Example</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<button type="button" class="btn btn-success" id="popoverButton" data-bs-toggle="popover" title="Popover Title" data-bs-content="এটি একটি পোপওভার কন্টেন্ট">
পোপওভার দেখুন
</button>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
<script>
var popoverButton = document.getElementById('popoverButton');
var popover = new bootstrap.Popover(popoverButton);
// Popover শো হওয়ার আগে ইভেন্ট
popoverButton.addEventListener('show.bs.popover', function () {
console.log('পোপওভার শো হওয়ার আগে');
});
// Popover শো হওয়ার পর ইভেন্ট
popoverButton.addEventListener('shown.bs.popover', function () {
console.log('পোপওভার শো হয়ে গেছে');
});
// Popover হাইড হওয়ার আগে ইভেন্ট
popoverButton.addEventListener('hide.bs.popover', function () {
console.log('পোপওভার হাইড হওয়ার আগে');
});
// Popover হাইড হওয়ার পর ইভেন্ট
popoverButton.addEventListener('hidden.bs.popover', function () {
console.log('পোপওভার হাইড হয়ে গেছে');
});
</script>
</body>
</html>
এখানে, পোপওভারের শো এবং হাইড হওয়ার আগের এবং পরের ইভেন্টগুলো হ্যান্ডল করা হয়েছে এবং কনসোলে লগ করা হয়েছে।
show.bs.tooltip, shown.bs.tooltip: টুলটিপ বা পোপওভার প্রদর্শন হওয়ার আগে এবং পরে ইভেন্ট হ্যান্ডলিং।hide.bs.tooltip, hidden.bs.tooltip: টুলটিপ বা পোপওভার গোপন হওয়ার আগে এবং পরে ইভেন্ট হ্যান্ডলিং।এই ইভেন্টগুলো ব্যবহার করে আপনি Tooltip এবং Popover এর কার্যকলাপ আরও ইন্টারেক্টিভ এবং কাস্টমাইজড করতে পারবেন।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
