বুটস্ট্রাপ পপ-ওভার প্লাগ-ইন
বুটস্ট্রাপ পপ-ওভার প্লাগ-ইন টুলটিপের মতোই; এটি হলো একটি পপ-আপ বক্স, যখন একজন ইউজার কোন এলিমেন্টের ক্লিক করে তখন এটি প্রদর্শিত হয়। পার্থক্য হলো পপ-ওভার টুলটিপের চেয়ে বেশি কন্টেন্ট ধারণ করতে পারে।
কিভাবে পপ-ওভার তৈরি করবেন
- যেই এলিমেন্টটিতে পপ-ওভার তৈরি করতে চান, সেই এলিমেন্টটিতে
data-toggle="popover"এট্রিবিউট ব্যবহার করুন। - পপ-ওভারের হেডার নির্ধারণ করার জন্য
titleএট্রিবিউট ব্যবহার করুন এবং পপ-ওভারের বডি নির্ধারণ করার জন্যdata-contentএট্রিবিউট ব্যবহার করুনঃ
kt_satt_skill_example_id=1182
নোটঃ পপ-ওভার অবশ্যই জেকুয়েরির মাধ্যমে সক্রিয় করে দিতে হবে। জেকুয়েরির মাধ্যমে সক্রিয় করার জন্য প্রথমে নির্দিষ্ট এলিমেন্টটিকে সিলেক্ট করুন এবং তারপর popover() মেথড কল করুন।
একটি ডকুমেন্টের সবকটি পপ-ওভারকে কল করে একসাথে একটিভ করার জন্য নিম্নলিখিত কোড ব্যবহার করুনঃ
kt_satt_skill_example_id=1184
পপ-ওভারের অবস্থান নির্ধারণ
ডিফল্টভাবে, পপ-ওভার সাধারণত ডান পাশে প্রদর্শিত হয়।
পপ-ওভারকে উপর, নিচ, বাম অথবা ডানে যোকোনো স্থানেই প্রদর্শন করানো যায়। পপ-ওভারের অবস্থান নির্দিষ্ট করার জন্য data-placement এট্রিবিউট ব্যবহার করুনঃ
kt_satt_skill_example_id=1187
পপ-ওভার ক্লোজ করা
ডিফল্টভাবে, আপনি যখন ঐ এলিমেন্টের উপর পূনরায় ক্লিক করবেন তখন পপ-ওভারটি ক্লোজ হয়ে যাবে। যাইহোক, আপনি যদি চান এলিমেন্টের বাহিরেও ক্লিক করলে পপ-ওভারটি ক্লোজ হয়ে যাক তাহলে data-trigger="focus" এট্রিবিউটটি ব্যবহার করুনঃ
kt_satt_skill_example_id=1189
টিপস: যদি আপনি এলিমেন্টের উপর মাউস হোভারের মাধ্যমে পপ-ওভার প্রদর্শন করতে চান তাহলে, data-trigger="hover" এট্রিবিউট ব্যবহার করুনঃ
kt_satt_skill_example_id=1190
Read more
