টুলটিপস
স্থানীয় শিরোনাম স্টোরেজের জন্য অ্যানিমেশন এবং ডেটা-অ্যাট্রিবিউটের জন্য CSS3 ব্যবহার করে CSS এবং JavaScript-এর সাথে কাস্টম বুটস্ট্র্যাপ টুলটিপ যোগ করার জন্য ডকুমেন্টেশন এবং উদাহরণ।
টুলটিপ প্লাগইন ব্যবহার করার সময় যা জানা দরকার:
- টুলটিপগুলি অবস্থানের জন্য 3য় পক্ষের লাইব্রেরি Popper.js- এর উপর নির্ভর করে । টুলটিপ কাজ করার জন্য আপনাকে bootstrap.js এর আগে popper.min.js অন্তর্ভুক্ত করতে হবে বা ব্যবহার করতে হবে
bootstrap.bundle.min.js
/bootstrap.bundle.js
যাতে Popper.js রয়েছে! - আপনি যদি উৎস থেকে আমাদের জাভাস্ক্রিপ্ট তৈরি করেন, তাহলে এটির প্রয়োজন
util.js
। - কার্যক্ষমতার কারণে টুলটিপগুলি অপ্ট-ইন করা হয়েছে, তাই আপনাকে সেগুলি নিজে থেকেই শুরু করতে হবে ৷
- শূন্য-দৈর্ঘ্যের শিরোনাম সহ টুলটিপগুলি কখনই প্রদর্শিত হয় না।
container: 'body'
আরো জটিল উপাদানে রেন্ডারিং সমস্যা এড়াতে নির্দিষ্ট করুন (যেমন আমাদের ইনপুট গ্রুপ, বোতাম গ্রুপ, ইত্যাদি) ।- লুকানো উপাদানগুলিতে টুলটিপ ট্রিগার করা কাজ করবে না।
.disabled
বা উপাদানগুলির জন্য টুলটিপগুলিdisabled
একটি মোড়ক উপাদানে ট্রিগার করা আবশ্যক৷- একাধিক লাইন বিস্তৃত হাইপারলিংক থেকে ট্রিগার করা হলে, টুলটিপগুলি কেন্দ্রীভূত হবে। এই আচরণ এড়াতে
white-space: nowrap;
আপনার এস ব্যবহার করুন.<a>
- DOM থেকে তাদের সংশ্লিষ্ট উপাদানগুলি সরানোর আগে টুলটিপগুলি অবশ্যই লুকিয়ে রাখতে হবে৷
যে সব পেয়েছেন? দুর্দান্ত, আসুন কিছু উদাহরণ দিয়ে তারা কীভাবে কাজ করে তা দেখি।
একটি পৃষ্ঠায় সমস্ত টুলটিপ শুরু করার একটি উপায় হল তাদের data-toggle
বৈশিষ্ট্য অনুসারে তাদের নির্বাচন করা:
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
টুলটিপগুলি দেখতে নীচের লিঙ্কগুলিতে হোভার করুন:
টাইট প্যান্ট পরের স্তর keffiyeh আপনি সম্ভবত তাদের শুনেনি. ফটো বুথ দাড়ি কাঁচা ডেনিম লেটারপ্রেস ভেগান মেসেঞ্জার ব্যাগ স্টাম্পটাউন। ফার্ম-টু-টেবিল সিটান, mcsweeney's fixie sustainable quinoa 8-bit আমেরিকান পোশাকে একটি টেরি রিচার্ডসন ভিনাইল চেম্ব্রে রয়েছে। দাড়ি স্টাম্পটাউন, কার্ডিগান বান মি লোমো থান্ডারক্যাটস। টোফু বায়োডিজেল উইলিয়ামসবার্গ মারফা, চার লোকো ম্যাকসুইনির ক্লিনজ ভেগান চেম্ব্রে। একজন সত্যিকারের বিদ্রূপাত্মক কারিগর যাই হোক না কেন কীটার , সিনস্টার ফার্ম-টু-টেবিল ব্যাঙ্কসি অস্টিন টুইটার হ্যান্ডেল ফ্রিগান ক্রেড কাঁচা ডেনিম একক-অরিজিন কফি ভাইরাল।
চারটি টুলটিপ দিকনির্দেশ দেখতে নীচের বোতামগুলির উপর হভার করুন: উপরে, ডান, নীচে এবং বাম৷
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
Tooltip on left
</button>
এবং কাস্টম এইচটিএমএল যোগ করা হয়েছে:
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
Tooltip with HTML
</button>
টুলটিপ প্লাগইন চাহিদা অনুযায়ী সামগ্রী এবং মার্কআপ তৈরি করে এবং ডিফল্টভাবে তাদের ট্রিগার উপাদানের পরে টুলটিপগুলি রাখে।
জাভাস্ক্রিপ্টের মাধ্যমে টুলটিপটি ট্রিগার করুন:
$('#example').tooltip(options)
একটি টুলটিপের জন্য প্রয়োজনীয় মার্কআপ শুধুমাত্র একটি data
বৈশিষ্ট্য এবং title
HTML উপাদানে আপনি একটি টুলটিপ পেতে চান৷ একটি টুলটিপের জেনারেট করা মার্কআপটি বেশ সহজ, যদিও এটির জন্য একটি অবস্থানের প্রয়োজন হয় (ডিফল্টরূপে, top
প্লাগইন দ্বারা সেট করা)।
টুলটিপ তৈরি করা কীবোর্ড এবং সহায়ক প্রযুক্তি ব্যবহারকারীদের জন্য কাজ করে
আপনার শুধুমাত্র HTML উপাদানগুলিতে টুলটিপ যোগ করা উচিত যা ঐতিহ্যগতভাবে কীবোর্ড-ফোকাসেবল এবং ইন্টারেক্টিভ (যেমন লিঙ্ক বা ফর্ম নিয়ন্ত্রণ)। যদিও স্বেচ্ছাচারী HTML উপাদানগুলি (যেমন <span>
s) বৈশিষ্ট্য যোগ করে ফোকাসযোগ্য করা যেতে পারে tabindex="0"
, এটি কীবোর্ড ব্যবহারকারীদের জন্য অ-ইন্টারেক্টিভ উপাদানগুলিতে সম্ভাব্য বিরক্তিকর এবং বিভ্রান্তিকর ট্যাব স্টপ যোগ করবে। উপরন্তু, বেশিরভাগ সহায়ক প্রযুক্তি বর্তমানে এই পরিস্থিতিতে টুলটিপ ঘোষণা করে না।
উপরন্তু, আপনার টুলটিপের জন্য ট্রিগার হিসাবে সম্পূর্ণরূপে নির্ভর করবেন না, hover
কারণ এটি কীবোর্ড ব্যবহারকারীদের জন্য আপনার টুলটিপগুলিকে ট্রিগার করা অসম্ভব করে তুলবে।
<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
<!-- Generated markup by the plugin -->
<div class="tooltip bs-tooltip-top" role="tooltip">
<div class="arrow"></div>
<div class="tooltip-inner">
Some tooltip text!
</div>
</div>
বৈশিষ্ট্য সহ উপাদানগুলি disabled
ইন্টারেক্টিভ নয়, যার অর্থ ব্যবহারকারীরা একটি টুলটিপ (বা পপওভার) ট্রিগার করতে ফোকাস করতে, হোভার করতে বা ক্লিক করতে পারে না। একটি সমাধান হিসাবে, আপনি একটি মোড়ক থেকে টুলটিপটিকে ট্রিগার করতে চাইবেন <div>
বা <span>
, ব্যবহার করে আদর্শভাবে কীবোর্ড-ফোকাসযোগ্য তৈরি করতে এবং অক্ষম উপাদানটিতে tabindex="0"
ওভাররাইড করতে চাইবেন৷pointer-events
<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>
বিকল্পগুলি ডেটা অ্যাট্রিবিউট বা জাভাস্ক্রিপ্টের মাধ্যমে পাস করা যেতে পারে। ডেটা অ্যাট্রিবিউটের জন্য, বিকল্পের নাম যোগ করুন data-
, যেমনটি data-animation=""
।
নাম | টাইপ | ডিফল্ট | বর্ণনা |
---|---|---|---|
অ্যানিমেশন | বুলিয়ান | সত্য | টুলটিপে একটি CSS ফেইড ট্রানজিশন প্রয়োগ করুন |
ধারক | স্ট্রিং | উপাদান | মিথ্যা | মিথ্যা | একটি নির্দিষ্ট উপাদানে টুলটিপ যুক্ত করে। উদাহরণ: |
বিলম্ব | সংখ্যা | বস্তু | 0 | টুলটিপ (ms) দেখানো এবং লুকানো বিলম্ব - ম্যানুয়াল ট্রিগার প্রকারে প্রযোজ্য নয় যদি একটি নম্বর সরবরাহ করা হয়, বিলম্ব লুকান/দেখানো উভয় ক্ষেত্রেই প্রয়োগ করা হয় বস্তুর গঠন হল: |
html | বুলিয়ান | মিথ্যা | টুলটিপে HTML এর অনুমতি দিন। যদি সত্য হয়, টুলটিপে HTML ট্যাগগুলি টুলটিপে আপনি যদি XSS আক্রমণ সম্পর্কে চিন্তিত হন তবে পাঠ্য ব্যবহার করুন৷ |
বসানো | স্ট্রিং | ফাংশন | 'শীর্ষ' | টুলটিপ কিভাবে অবস্থান করবেন - স্বয়ংক্রিয় | শীর্ষ | নীচে | বাম | অধিকার প্লেসমেন্ট নির্ধারণ করতে যখন একটি ফাংশন ব্যবহার করা হয়, তখন এটিকে টুলটিপ DOM নোডের সাথে প্রথম আর্গুমেন্ট এবং ট্রিগারিং উপাদান DOM নোডটিকে দ্বিতীয় হিসাবে বলা হয়। |
নির্বাচক | স্ট্রিং | মিথ্যা | মিথ্যা | যদি একটি নির্বাচক প্রদান করা হয়, টুলটিপ বস্তুগুলি নির্দিষ্ট লক্ষ্যগুলিতে অর্পণ করা হবে। অনুশীলনে, এটি ডাইনামিক এইচটিএমএল কন্টেন্টকে পপওভার যোগ করতে সক্ষম করতে ব্যবহৃত হয়। এটি এবং একটি তথ্যপূর্ণ উদাহরণ দেখুন । |
টেমপ্লেট | স্ট্রিং | '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' |
টুলটিপ তৈরি করার সময় ব্যবহার করার জন্য বেস HTML। টুলটিপ এর
সবচেয়ে বাইরের মোড়কের উপাদানটিতে |
শিরোনাম | স্ট্রিং | উপাদান | ফাংশন | ' |
|
ট্রিগার | স্ট্রিং | 'হোভার ফোকাস' | টুলটিপ কিভাবে ট্রিগার হয় - ক্লিক করুন | হোভার | ফোকাস | ম্যানুয়াল আপনি একাধিক ট্রিগার পাস করতে পারেন; একটি স্থান দিয়ে তাদের আলাদা করুন।
|
অফসেট | সংখ্যা | স্ট্রিং | 0 | টুলটিপ এর টার্গেটের সাথে সম্পর্কিত অফসেট। আরও তথ্যের জন্য Popper.js এর অফসেট ডক্স দেখুন । |
ফলব্যাক প্লেসমেন্ট | স্ট্রিং | অ্যারে | 'উল্টানো' | পপার ফলব্যাকে কোন অবস্থান ব্যবহার করবে তা নির্দিষ্ট করার অনুমতি দিন। আরও তথ্যের জন্য Popper.js এর আচরণ ডক্স দেখুন |
সীমানা | স্ট্রিং | উপাদান | 'স্ক্রোল প্যারেন্ট' | টুলটিপের ওভারফ্লো সীমাবদ্ধতা। 'viewport' , 'window' , 'scrollParent' , বা একটি HTMLElement রেফারেন্স (শুধুমাত্র জাভাস্ক্রিপ্ট) এর মান গ্রহণ করে । আরও তথ্যের জন্য Popper.js এর প্রতিরোধ ওভারফ্লো ডক্স দেখুন । |
পৃথক টুলটিপের জন্য ডেটা বৈশিষ্ট্য
পৃথক টুলটিপগুলির জন্য বিকল্পগুলি ডেটা বৈশিষ্ট্যগুলির ব্যবহারের মাধ্যমে বিকল্পভাবে নির্দিষ্ট করা যেতে পারে, যেমন উপরে ব্যাখ্যা করা হয়েছে।
অ্যাসিঙ্ক্রোনাস পদ্ধতি এবং রূপান্তর
সমস্ত API পদ্ধতি অসিঙ্ক্রোনাস এবং একটি রূপান্তর শুরু করে । রূপান্তর শুরু হওয়ার সাথে সাথেই কিন্তু এটি শেষ হওয়ার আগেই তারা কলারের কাছে ফিরে আসে । উপরন্তু, একটি রূপান্তরকারী উপাদানের উপর একটি পদ্ধতি কল উপেক্ষা করা হবে ।
একটি উপাদান সংগ্রহে একটি টুলটিপ হ্যান্ডলার সংযুক্ত করে।
একটি উপাদানের টুলটিপ প্রকাশ করে। টুলটিপ আসলে দেখানো হওয়ার আগে (অর্থাৎ shown.bs.tooltip
ঘটনা ঘটার আগে) কলারের কাছে ফিরে আসে। এটি টুলটিপের একটি "ম্যানুয়াল" ট্রিগারিং হিসাবে বিবেচিত হয়। শূন্য-দৈর্ঘ্যের শিরোনাম সহ টুলটিপ কখনই প্রদর্শিত হয় না।
$('#element').tooltip('show')
একটি উপাদানের টুলটিপ লুকিয়ে রাখে। টুলটিপ আসলে লুকানো হওয়ার আগে (অর্থাৎ hidden.bs.tooltip
ঘটনা ঘটার আগে) কলারের কাছে ফিরে আসে। এটি টুলটিপের একটি "ম্যানুয়াল" ট্রিগারিং হিসাবে বিবেচিত হয়।
$('#element').tooltip('hide')
একটি উপাদানের টুলটিপ টগল করে। টুলটিপটি আসলে দেখানো বা লুকানো হওয়ার আগে কলারের কাছে ফিরে আসে (অর্থাৎ shown.bs.tooltip
বা hidden.bs.tooltip
ঘটনা ঘটার আগে)। এটি টুলটিপের একটি "ম্যানুয়াল" ট্রিগারিং হিসাবে বিবেচিত হয়।
$('#element').tooltip('toggle')
একটি উপাদানের টুলটিপ লুকায় এবং ধ্বংস করে। যে টুলটিপগুলি ডেলিগেশন ব্যবহার করে (যা বিকল্পটি ব্যবহার করেselector
তৈরি করা হয় ) বংশধর ট্রিগার উপাদানগুলিতে পৃথকভাবে ধ্বংস করা যাবে না।
$('#element').tooltip('dispose')
একটি উপাদানের টুলটিপ দেখানোর ক্ষমতা দেয়। টুলটিপ ডিফল্টরূপে সক্রিয় করা হয়.
$('#element').tooltip('enable')
একটি উপাদানের টুলটিপ দেখানোর ক্ষমতা সরিয়ে দেয়। টুলটিপটি শুধুমাত্র দেখাতে সক্ষম হবে যদি এটি পুনরায় সক্রিয় করা হয়।
$('#element').tooltip('disable')
একটি উপাদানের টুলটিপ দেখানো বা লুকানোর ক্ষমতা টগল করে।
$('#element').tooltip('toggleEnabled')
একটি উপাদানের টুলটিপের অবস্থান আপডেট করে।
$('#element').tooltip('update')
ইভেন্টের ধরণ | বর্ণনা |
---|---|
show.bs.tooltip | এই ইভেন্টটি অবিলম্বে ফায়ার করে যখন show ইনস্ট্যান্স পদ্ধতিটি কল করা হয়। |
দেখানো.bs.tooltip | টুলটিপটি ব্যবহারকারীর কাছে দৃশ্যমান হয়ে গেলে এই ইভেন্টটি বরখাস্ত করা হয় (সিএসএস রূপান্তর সম্পূর্ণ হওয়ার জন্য অপেক্ষা করবে)। |
hide.bs.tooltip | এই ইভেন্টটি অবিলম্বে বহিস্কার করা হয় যখন hide উদাহরণ পদ্ধতিটি কল করা হয়। |
hidden.bs.tooltip | টুলটিপটি ব্যবহারকারীর কাছ থেকে লুকানো শেষ হলে এই ইভেন্টটি বরখাস্ত করা হয় (সিএসএস রূপান্তর সম্পূর্ণ হওয়ার জন্য অপেক্ষা করবে)। |
inserted.bs.tooltip | show.bs.tooltip যখন টুলটিপ টেমপ্লেটটি DOM-এ যোগ করা হয় তখন ইভেন্টের পরে এই ইভেন্টটি বরখাস্ত করা হয় । |
$('#myTooltip').on('hidden.bs.tooltip', function () {
// do something…
})