বুটস্ট্রাপ জেএস টুলটিপ রেফারেন্স - bootstrap JS Tootip Reference
বুটস্ট্রাপ জেএস টুলটিপ (tooltip.js)
টুলটিপ প্লাগ-ইন হলো ছোট পপ-আপ বক্স যখন ইউজার কোন এলিমেন্টের উপর মাউস পয়েন্টার নিয়ে আসে তখন এটি প্রদর্শিত হয়:
>বুটস্ট্রাপ টুলটিপ সম্পর্কিত টিউটোরিয়ালের জন্য, আমাদের বুটস্ট্রাপ টুলটিপ টিউটোরিয়ালটি পড়ুন।
বুটস্ট্রাপ data-* এট্রিবিউট মাধ্যম
data-toggle="tooltip" এট্রিবিউট টুলটিপ সক্রিয় করে।
টুলটিপ আকারে যে টেক্সটি প্রদর্শিত হবে তা title এট্রিবিউটের মধ্যে লিখতে হবে।
বুটস্ট্রাপ জাভাস্ক্রিপ্ট মাধ্যমে
টুলটিপ সিএসএস নয় - এটি শুধুমাত্র প্লাগ-ইন, তাই এটিকে জেকুয়েরির মাধ্যমে শুরু করিয়ে দিতে হয়: নির্দিষ্ট এলিমেন্টটিকে সিলেক্ট করুন এবং tooltip() মেথড কল করুন।
উদাহরণ
// data-toggle="tooltips" এর মাধ্যমে একটি ডকুমেন্টের সকল টুলটিপকে সিলেক্ট করুন
$('[data-toggle="tooltip"]').tooltip();
// একটি নির্দিষ্ট এলিমেন্টকে সিলেক্ট করুন
$('#myTooltip').tooltip();
টুলটিপ টিউটোরিয়াল »
বুটস্ট্রাপ টুলটিপ অপশন
অপশন ডাটা এট্রিবিউট অথবা জাভাস্ক্রিপ্টের মাধ্যমে অতিক্রম করতে পারে। data এট্রিবিউটের ক্ষেত্রে, data সাথে অপশনের নাম সংযুক্ত করতে হবে। যেমন data-placement=""
| নাম | ধরন | ডিফল্ট | বর্ণনা | টুলটিপ টিউটোরিয়াল |
|---|---|---|---|---|
| animation | boolean | true |
টুলটিপ শো এবং হাইডের সময় সিএসএস ফেড ট্রানজিশন এফেক্ট যুক্ত হবে কিনা তা নির্দিষ্ট করে।
|
টুলটিপ টিউটোরিয়াল |
| container | string, or the boolean false | false | একটি নির্দিষ্ট এলিমেন্টে টুলটিপ সংযোজন করে। উদাহরণ: container: 'body' |
টুলটিপ টিউটোরিয়াল |
| delay | number, or object | 0 | টুলটিপটি হাইড এবং শো হতে কত মিলিসেকেন্ড লাগে তার সংখ্যা উল্লেখ করে। খোলার জন্য কতোটুকু delay হবে এবং বন্ধ করার জন্য অন্য আরেকটি নির্দিষ্ট করতে অবজেক্ট স্ট্রাকচারে ব্যবহার করা হয়: delay: {show: 500, hide: 100} - যা ওপেন করতে ৫০০ মিলিসেকেন্ড লাগে, কিন্তু বন্ধ করতে মাত্র ১০০ মিলিসেকেন্ড লাগে। |
টুলটিপ টিউটোরিয়াল |
| html | boolean | false | টুলটিপে এইচটিএমএল ট্যাগ গ্রহণযোগ্য হবে কিনা তা নির্দিষ্ট করে:
যখন false (এটা ডিফল্ট) সেট করা হয়, তখন জেকুয়েরির text() মেথডটি ব্যবহার করতে হবে । যদি আপনি XSS attack নিয়ে উদ্বিগ্ন থাকেন তাহলে এটা ব্যবহার করুন। |
টুলটিপ টিউটোরিয়াল |
| placement | string | "top" | টুলটিপের অবস্থান নির্দিষ্ট করে। সম্ভাব্য ভ্যালু গুলো হল:
|
টুলটিপ টিউটোরিয়াল |
| selector | string, or the boolean false | false | একটি নির্দিষ্ট সিলেক্টরে টুলটিপ যুক্ত করে | টুলটিপ টিউটোরিয়াল |
| template | string | যখন টুলটিপ তৈরি করা হয় তখন বেজ এইচটিএমএল ব্যবহার করতে হবে। যে এলিমেন্টের ক্লাস .tooltip-inner সেই এলিমেন্টে টুলটিপের টাইটেলটি সংযুক্ত হবে। আর যে এলিমেন্টের ক্লাস .tooltip-arrow সেই এলিমেন্টটিতে টুলটিপের এর্যো যুক্ত হবে। সর্বোচ্চ এলিমেন্টে অবশ্যই .tooltip ক্লাস থাকতে হবে । |
||
| title | string | "" | টুলটিপের মধ্যে যে টেক্সট প্রদর্শন করবে তাকে নির্দেশ করে | টুলটিপ টিউটোরিয়াল |
| trigger | string | "hover focus" | কিভাবে টুলটিপকে ট্রিগার করে তা নির্দেশ করে। সম্ভাব্য ভ্যালু গুলো হল:
|
টুলটিপ টিউটোরিয়াল |
| viewport | string, or object | {selector: "body", padding: 0} | এই এলিমেন্টের ভিতরে টুলটিপকে রাখবে উদাহরণ: viewport: '#viewport' or {selector: '#viewport', padding: 0} |
বুটস্ট্রাপ টুলটিপ মেথড
নিচের টেবিলে টুলটিপের মেথডগুলো দেখানো হলো।
| মেথড | বর্ণনা | টুলটিপ টিউটোরিয়াল |
|---|---|---|
| .tooltip(options) | অপশন দ্বারা টুলটিপকে সক্রিয় করা হয়। ভ্যালিড ভ্যালুর জন্য উপরের অপশন গুলো দেখুন | টুলটিপ টিউটোরিয়াল |
| .tooltip("show") | টুলটিপ টিকে প্রদর্শন করে | টুলটিপ টিউটোরিয়াল |
| .tooltip("hide") | টুলটিপ টিকে হাইড করে | টুলটিপ টিউটোরিয়াল |
| .tooltip("toggle") | টুলটিপ টিকে এক বার প্রদর্শন আবার হাইড করে (টোগল) | টুলটিপ টিউটোরিয়াল |
| .tooltip("destroy") | টুলটিপ টিকে হাইড এবং ডিলেট করে দেয় | টুলটিপ টিউটোরিয়াল |
টুলটিপ ইভেন্ট
টুলটিপের ইভেন্টসমূহ নিম্নোক্ত টেবিলে দেখানো হলো।
| ইভেন্ট | বর্ণনা | টুলটিপ টিউটোরিয়াল |
|---|---|---|
| show.bs.tooltip | যখন ট্যাব প্রদর্শন করা হয় তখন ঘটে | টুলটিপ টিউটোরিয়াল |
| shown.bs.tooltip | যখন ট্যাবটি সম্পূর্ন প্রদর্শিত হয় তখন এই ইভেন্টটি ঘটে (সিএসএস ট্রানজিশন সম্পন্ন হওয়ার পর) | টুলটিপ টিউটোরিয়াল |
| hide.bs.tooltip | যখন ট্যাব হাইড করা হয় তখন ঘটে | টুলটিপ টিউটোরিয়াল |
| hidden.bs.tooltip | যখন ট্যাবটি সম্পূর্ন হাইড হয়ে যায় তখন এই ইভেন্টটি ঘটে (সিএসএস ট্রানজিশন সম্পন্ন হওয়ার পর) | টুলটিপ টিউটোরিয়াল |
উদাহরণ
বুটস্ট্রাপ কাস্টম টুলটিপ ডিজাইন
টুলটিপকে ইচ্ছেমত ডিজাইন করতে সিএসএস ব্যবহার করুন:
উদাহরণ
/* টুলটিপ */
.test + .tooltip > .tooltip-inner {
background-color:
#73AD21;
color: #FFFFFF;
border: 1px solid green;
padding: 15px;
font-size: 20px;
}
/* উপরে প্রদর্শিত টুলটিপ */
.test + .tooltip.top >
.tooltip-arrow {
border-top: 5px solid green;
}
/* নিচে প্রদর্শিত টুলটিপ */
.test + .tooltip.bottom
> .tooltip-arrow {
border-bottom: 5px solid blue;
}
/* বামে প্রদর্শিত টুলটিপ */
.test + .tooltip.left
> .tooltip-arrow {
border-left: 5px solid red;
}
/* ডানে প্রদর্শিত টুলটিপ */
.test + .tooltip.right
> .tooltip-arrow {
border-right: 5px solid black;
}
টুলটিপ টিউটোরিয়াল »