এইচটিএমএল সিএসএস বুটস্ট্রাপ জাভাস্ক্রিপ্ট জেকুয়েরি
ফোরাম
×

বুটস্ট্রাপ টিউটোরিয়াল

হোম-Home শুরু করুন-Get Started গ্রীড বেসিক-Grid Basic

সিএসএস কম্পোনেন্ট

টাইপোগ্রাফী-Typography টেবিল-Table ইমেজ-Image জামবোর্টন-Jumbotron বুটস্ট্রাপ Well এলার্ট-Alert বাটন-Button বাটন গ্রুপ-Button Group গ্লিফআইকন-Glypicon ব্যাজ/লেভেল-Badge/Label প্রোগ্রেস বার-Progress Bar পেজিনেশন-Pagination পেজার-Pager লিস্ট গ্রুপ-List Group প্যানেল-Panel ফরম-Form ইনপুট-Input ইনপুট(২)-Input(2) ইনপুটের আকার-Input Sizing সাহায্যকারী-Helper

JS কম্পোনেন্ট

ড্রপডাউন-Dropdown কলাপ্স-Collapse ট্যাব/পিল-Tab/Pill ন্যাভবার-Navbar ক্যারোসেল-Carousel মোডাল-Modal টুলটিপ-Tooltip পপওভার-Popover স্ক্রলস্পাই-Scrollspy এফিক্স-Affix

বুটস্ট্রাপ গ্রীড সিস্টেম

গ্রীড সিস্টেম-Grid System বুটস্ট্রাপ Stacked/Horizontal গ্রীড ছোট-Grid Small গ্রীড মিডিয়াম-Grid Medium গ্রীড বড়-Grid Large গ্রীড উদাহরণ-Grid Example

বুটস্ট্রাপ রেফারেন্স

ড্রপডাউন-Dropdown কলাপ্স-Collapse ট্যাব-Tab বাটন-Button ক্যারোসেল-Carousel মোডাল-Modal স্ক্রলস্পাই-Scrollspy এফিক্স-Affix

 

বুটস্ট্রাপ JS টু্লটিপ


JS টু্লটিপ (tooltip.js)

টুলটিপ প্লাগ-ইন হলো ছোট পপ-আপ বক্স যখন ইউজার কোন এলিমেন্টের উপর মাউস পয়েন্টার নিয়ে আসে তখন এটি প্রদর্শিত হয়:

টুলটিপ সম্পর্কিত টিউটোরিয়ালের জন্য, আমাদের বুটস্ট্রাপ টুলটিপ টিউটোরিয়ালটি পড়ুন।


data-* এট্রিবিউট মাধ্যম

data-toggle="tooltip" এট্রিবিউট টুলটিপ সক্রিয় করে।

টুলটিপ আকারে যে টেক্সটি প্রদর্শিত হবে তা title এট্রিবিউটের মধ্যে লিখতে হবে।

উদাহরণ

<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
নিজে চেষ্টা করি »

জাভাস্ক্রিপ্ট মাধ্যমে

টুলটিপ সিএসএস নয় - এটি শুধুমাত্র প্লাগ-ইন, তাই এটিকে জেকুয়েরির মাধ্যমে শুরু করিয়ে দিতে হয়: নির্দিষ্ট এলিমেন্টটিকে সিলেক্ট করুন এবং tooltip() মেথড কল করুন।

উদাহরণ

// data-toggle="tooltips" এর মাধ্যমে একটি ডকুমেন্টের সকল টুলটিপকে সিলেক্ট করুন
$('[data-toggle="tooltip"]').tooltip();

// একটি নির্দিষ্ট এলিমেন্টকে সিলেক্ট করুন
$('#myTooltip').tooltip();
নিজে চেষ্টা করি »

টুলটিপ অপশন

অপশন ডাটা এট্রিবিউট অথবা জাভাস্ক্রিপ্টের মাধ্যমে অতিক্রম করতে পারে। data এট্রিবিউটের ক্ষেত্রে, data সাথে অপশনের নাম সংযুক্ত করতে হবে। যেমন data-placement=""

নাম ধরন ডিফল্ট বর্ণনা চেষ্টা করি
animation boolean true

টুলটিপ শো এবং হাইডের সময় সিএসএস ফেড ট্রানজিশন এফেক্ট যুক্ত হবে কিনা তা নির্দিষ্ট করে।

  • true - ফেড ইফেক্ট যুক্ত হবে
  • false - ফেড ইফেক্ট যুক্ত হবে না
চেষ্টা করি
container string, or the boolean false false একটি নির্দিষ্ট এলিমেন্টে টুলটিপ সংযোজন করে।
উদাহরণ: container: 'body'
চেষ্টা করি
delay number, or object 0 টুলটিপটি হাইড এবং শো হতে কত মিলিসেকেন্ড লাগে তার সংখ্যা উল্লেখ করে।

খোলার জন্য কতোটুকু delay হবে এবং বন্ধ করার জন্য অন্য আরেকটি নির্দিষ্ট করতে অবজেক্ট স্ট্রাকচারে ব্যবহার করা হয়:

delay: {show: 500, hide: 100} - যা ওপেন করতে ৫০০ মিলিসেকেন্ড লাগে, কিন্তু বন্ধ করতে মাত্র ১০০ মিলিসেকেন্ড লাগে।
চেষ্টা করি
html boolean  false টুলটিপে এইচটিএমএল ট্যাগ গ্রহণযোগ্য হবে কিনা তা নির্দিষ্ট করে:
 
  • true - এইচটিএমএল ট্যাগ গ্রহণযোগ্য
  • false - এইচটিএমএল ট্যাগ গ্রহণযোগ্য নয়
নোট: এইচটিএমএলকে অবশই টাইটেল এট্রিবিউটের মধ্যে অন্তর্ভূক্ত করতে হবে। (অথবা টাইটেল অপশন ব্যবহার করতে হবে)।

যখন false (এটা ডিফল্ট) সেট করা হয়, তখন জেকুয়েরির text() মেথডটি ব্যবহার করতে হবে । যদি আপনি XSS attack নিয়ে উদ্বিগ্ন থাকেন তাহলে এটা ব্যবহার করুন।
চেষ্টা করি
placement string "top" টুলটিপের অবস্থান নির্দিষ্ট করে। সম্ভাব্য ভ্যালু গুলো হল:

  • "top" - টুলটিপকে উপরে দেখাবে
  • "bottom" - টুলটিপকে নিচে দেখাবে
  • "left" - টুলটিপকে বামে দেখাবে
  • "right" - টুলটিপকে ডানে দেখাবে
  • "auto" - টুলটিপের অবস্থান সর্ম্পকে ব্রাউজার সিদ্ধান্ত নেয়। উদাহরণস্বরূপ, যদি ভ্যালুটি "auto left" হয়, তাহলে সম্ভাব্য ক্ষেত্রে বামে দেখাবে, অন্যথায় ডানে। যদি ভ্যালুটি "auto bottom" হয়, তাহলে টুলটিপটি নিচে প্রদর্শিত হবে, অন্যথায় উপরে দেখাবে।
চেষ্টা করি
selector string, or the boolean false false একটি নির্দিষ্ট সিলেক্টরে টুলটিপ যুক্ত করে চেষ্টা করি
template string   যখন টুলটিপ তৈরি করা হয় তখন বেজ এইচটিএমএল ব্যবহার করতে হবে।

যে এলিমেন্টের ক্লাস .tooltip-inner সেই এলিমেন্টে টুলটিপের টাইটেলটি সংযুক্ত হবে। আর যে এলিমেন্টের ক্লাস .tooltip-arrow সেই এলিমেন্টটিতে টুলটিপের এর‍্যো যুক্ত হবে।

সর্বোচ্চ এলিমেন্টে অবশ্যই .tooltip ক্লাস থাকতে হবে ।
title string "" টুলটিপের মধ্যে যে টেক্সট প্রদর্শন করবে তাকে নির্দেশ করে চেষ্টা করি
trigger string "hover focus" কিভাবে টুলটিপকে ট্রিগার করে তা নির্দেশ করে। সম্ভাব্য ভ্যালু গুলো হল:

  • "click" - ক্লিকের মাধ্যমে টুলটিপকে ট্রিগার করা হয়
  • "hover" - হোভারের মাধ্যমে টুলটিপকে ট্রিগার করা হয়
  • "focus" - ফোকাস অবস্থায় টুলটিপ ট্রিগার হয়
  • "manual" - টুলটিপকে ম্যানুয়েলি ট্রিগার করা হয়
টিপ : একাধিক ভ্যালু পাসের ক্ষেত্রে, স্পেস দ্বারা পৃথক করতে হবে
চেষ্টা করি
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 যখন ট্যাবটি সম্পূর্ন হাইড হয়ে যায় তখন এই ইভেন্টটি ঘটে (সিএসএস ট্রানজিশন সম্পন্ন হওয়ার পর) চেষ্টা করি

Examples

উদাহরণ

কাস্টম টুলটিপ ডিজাইন

টুলটিপকে ইচ্ছেমত ডিজাইন করতে সিএসএস ব্যবহার করুন:

উদাহরণ

/* টুলটিপ */
.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;
}
নিজে চেষ্টা করি »