বুটস্ট্রাপ টুলটিপ - Bootstrap Tooltip
বুটস্ট্রাপ টুলটিপ প্লাগ-ইন
বুটস্ট্রাপ টুলটিপ প্লাগ-ইন হলো ছোট পপ-আপ বক্স। যখন ইউজার কোন এলিমেন্টের উপর মাউস পয়েন্টার নিয়ে আসে তখন এটি প্রদর্শিত হয়ঃ
টিপসঃ বুটস্ট্রাপ টুলটিপ প্লাগ-ইন ব্যবহারের জন্য আপনি চাইলে বুটস্ট্রাপের আলাদা "tooltip.js" ফাইল ব্যবহার করতে পারেন, অথবা বুটস্ট্রাপের সম্পূর্ণ js ফাইল "bootstrap.js" বা "bootstrap.min.js" ফাইলও ব্যবহার করতে পারেন। বুটস্ট্রাপের সম্পূর্ণ js ফাইলের মধ্যে বুটস্ট্রাপের সবগুলো কম্পোনেন্ট একত্রে থাকে। টুলটিপ কম্পোনেন্ট ব্যবহার করার জন্য উপরের যেকোন একটি ফাইল ওয়েবপেজে অন্তর্ভুক্ত করলেই চলবে।
কিভাবে টুলটিপ তৈরি করবেন
- যেই এলিমেন্টটিতে টুলটিপ তৈরি করতে চান, সেই এলিমেন্টের মধ্যে
data-toggle="tooltip"এট্রিবিউটটি যুক্ত করুন। - টুলটিপ হিসেবে যেই টেক্সটি প্রদর্শন করতে চান সেটি
titleএট্রিবিউটের ভ্যালু হিসেবে যুক্ত করুনঃ
<a href="#" data-toggle="tooltip" title="Hello Learners!">এখানে হোভার করুন</a>
নোটঃ টুলটিপ অবশ্যই জেকুয়েরির মাধ্যমে সক্রিয় করে দিতে হবে। জেকুয়েরির মাধ্যমে সক্রিয় করার জন্য প্রথমে নির্দিষ্ট এলিমেন্টটিকে সিলেক্ট করুন এবং তারপর tooltip() মেথডটি কল করুন।
একটি ডকুমেন্টে অবস্থিত সকল টুলটিপকে সক্রিয় করার জন্য নিম্নলিখিত কোডটি ব্যবহার করুনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Tooltip Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>টুলটিপ উদাহরণ</h3>
<a href="#" data-toggle="tooltip" title="Hello Learners!">এখানে হোভার করুন</a>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>
ফলাফল
টুলটিপের অবস্থান নির্ধারণ
ডিফল্টভাবে টুলটিপ সাধারনত এলিমেন্টের উপরে প্রদর্শিত হয়।
টুলটিপের অবস্থান উপর, নিচ, বামে অথবা ডানে যেকোনো স্থানেই নির্ধারণ করা যায়। টুলটিপের অবস্থান নির্ধারণ করার জন্য data-placement এট্রিবিউট ব্যবহার করুনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Tooltip Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>টুলটিপ উদাহরণ</h3>
<p>data-placement এট্রিবিউটের মাধ্যমে টুলটিপের অবস্থান নির্ধারণ করা হয়।</p>
<ul class="list-inline">
<li><a href="#" data-toggle="tooltip" data-placement="top" title="Hello Learners!">উপরে টুলটিপ</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Hello Learners!">নিচে টুলটিপ</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="left" title="Hello Learners!">বামে টুলটিপ</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="right" title="Hello Learners!">ডানে টুলটিপ</a></li>
</ul>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>
ফলাফল
টিপসঃ এছাড়াও আপনি চাইলে data-placement এট্রিবিউটের অন্য একটি ভ্যালুও দিতে পারেন। যেমনঃ "auto"। এটি ব্রাউজারকে টুলটিপের অবস্থানকে নির্দিষ্ট করার অনুমতি প্রদান করে। উদাহরণস্বরুপ, যদি ভ্যালু হিসেবে "auto left" দেয়া হয়, তাহলে যখন সম্ভব হয় টুলটিপটি বামে প্রদর্শন করবে অন্যথায় ডানে।