বুটস্ট্রাপ পপ-ওভার - Bootstrap Popover
বুটস্ট্রাপ পপ-ওভার প্লাগ-ইন
বুটস্ট্রাপ পপ-ওভার প্লাগ-ইন টুলটিপের মতোই; এটি হলো একটি পপ-আপ বক্স, যখন একজন ইউজার কোন এলিমেন্টের ক্লিক করে তখন এটি প্রদর্শিত হয়। পার্থক্য হলো পপ-ওভার টুলটিপের চেয়ে বেশি কন্টেন্ট ধারণ করতে পারে।
টিপসঃ পপ-ওভার প্লাগ-ইন ব্যবহারের জন্য আপনি চাইলে বুটস্ট্রাপের আলাদা "popover.js" ফাইল ব্যবহার করতে পারেন, অথবা বুটস্ট্রাপের সম্পূর্ণ js ফাইল "bootstrap.js" বা "bootstrap.min.js" ফাইলও ব্যবহার করতে পারেন। বুটস্ট্রাপের সম্পূর্ণ js ফাইলের মধ্যে বুটস্ট্রাপের সবগুলো কম্পোনেন্ট একত্রে থাকে। প্লাগ-ইন কম্পোনেন্ট ব্যবহার করার জন্য উপরের যেকোন একটি ফাইল ওয়েবপেজে অন্তর্ভুক্ত করলেই চলবে।
কিভাবে পপ-ওভার তৈরি করবেন
- যেই এলিমেন্টটিতে পপ-ওভার তৈরি করতে চান, সেই এলিমেন্টটিতে
data-toggle="popover"এট্রিবিউট ব্যবহার করুন। - পপ-ওভারের হেডার নির্ধারণ করার জন্য
titleএট্রিবিউট ব্যবহার করুন এবং পপ-ওভারের বডি নির্ধারণ করার জন্যdata-contentএট্রিবিউট ব্যবহার করুনঃ
<a href="#" data-toggle="popover" title="পপ-ওভার হেডার" data-content="পপ-ওভারের মধ্যের কন্টেন্ট">পপ-ওভার টোগল</a>
নোটঃ পপ-ওভার অবশ্যই জেকুয়েরির মাধ্যমে সক্রিয় করে দিতে হবে। জেকুয়েরির মাধ্যমে সক্রিয় করার জন্য প্রথমে নির্দিষ্ট এলিমেন্টটিকে সিলেক্ট করুন এবং তারপর popover() মেথড কল করুন।
একটি ডকুমেন্টের সবকটি পপ-ওভারকে কল করে একসাথে একটিভ করার জন্য নিম্নলিখিত কোড ব্যবহার করুনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Popover 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="popover" title="পপ-ওভার হেডার" data-content="পপ-ওভারের মধ্যের কন্টেন্ট">পপ-ওভার টোগল</a>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
</body>
</html>
ফলাফল
পপ-ওভারের অবস্থান নির্ধারণ
ডিফল্টভাবে, পপ-ওভার সাধারণত ডান পাশে প্রদর্শিত হয়।
পপ-ওভারকে উপর, নিচ, বাম অথবা ডানে যোকোনো স্থানেই প্রদর্শন করানো যায়। পপ-ওভারের অবস্থান নির্দিষ্ট করার জন্য data-placement এট্রিবিউট ব্যবহার করুনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Popover 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>
<ul class="list-inline">
<li><a href="#" title="হেডার" data-toggle="popover" data-placement="top" data-content="কন্টেন্ট">উপর</a></li>
<li><a href="#" title="হেডার" data-toggle="popover" data-placement="bottom" data-content="কন্টেন্ট">নিচ</a></li>
<li><a href="#" title="হেডার" data-toggle="popover" data-placement="left" data-content="কন্টেন্ট">বাম</a></li>
<li><a href="#" title="হেডার" data-toggle="popover" data-placement="right" data-content="কন্টেন্ট">ডান</a></li>
</ul>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
</body>
</html>
ফলাফল
টিপসঃ এছাড়াও আপনি চাইলে data-placement এট্রিবিউটের অন্য একটি ভ্যালুও দিতে পারেন। যেমনঃ "auto"। এটি ব্রাউজারকে পপ-ওভারের অবস্থানকে নির্দিষ্ট করার অনুমতি প্রদান করে। উদাহরণস্বরুপ, যদি ভ্যালু হিসেবে "auto left" দেয়া হয়, তাহলে যখন সম্ভব হয় পপ-ওভারটি বামে প্রদর্শিত হবে অন্যথায় ডানে।
পপ-ওভার ক্লোজ করা
ডিফল্টভাবে, আপনি যখন ঐ এলিমেন্টের উপর পূনরায় ক্লিক করবেন তখন পপ-ওভারটি ক্লোজ হয়ে যাবে। যাইহোক, আপনি যদি চান এলিমেন্টের বাহিরেও ক্লিক করলে পপ-ওভারটি ক্লোজ হয়ে যাক তাহলে data-trigger="focus" এট্রিবিউটটি ব্যবহার করুনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Popover 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="popover" data-trigger="focus" title="পপ-ওভার হেডার"
data-content="পপ-ওভারের মধ্যের কন্টেন্ট">পপ-ওভার টোগল</a>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
</body>
</html>
ফলাফল
টিপস: যদি আপনি এলিমেন্টের উপর মাউস হোভারের মাধ্যমে পপ-ওভার প্রদর্শন করতে চান তাহলে, data-trigger="hover" এট্রিবিউট ব্যবহার করুনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Popover 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="popover" data-trigger="hover" title="পপ-ওভার হেডার"
data-content="পপ-ওভারের মধ্যের কন্টেন্ট">পপ-ওভার টোগল</a>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
</body>
</html>
ফলাফল