Source

টুলটিপস

স্থানীয় শিরোনাম স্টোরেজের জন্য অ্যানিমেশন এবং ডেটা-অ্যাট্রিবিউটের জন্য 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 থেকে তাদের সংশ্লিষ্ট উপাদানগুলি সরানোর আগে টুলটিপগুলি অবশ্যই লুকিয়ে রাখতে হবে৷
  • টুলটিপ ট্রিগার করা যেতে পারে একটি ছায়া DOM এর ভিতরে একটি উপাদানের জন্য ধন্যবাদ।

এই উপাদানটির অ্যানিমেশন প্রভাব prefers-reduced-motionমিডিয়া প্রশ্নের উপর নির্ভর করে। আমাদের অ্যাক্সেসিবিলিটি ডকুমেন্টেশনের হ্রাসকৃত গতি বিভাগটি দেখুন ।

যে সব পেয়েছেন? দুর্দান্ত, আসুন কিছু উদাহরণ দিয়ে তারা কীভাবে কাজ করে তা দেখি।

উদাহরণ: সর্বত্র টুলটিপ সক্ষম করুন

একটি পৃষ্ঠায় সমস্ত টুলটিপ শুরু করার একটি উপায় হল তাদের 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)
ওভারফ্লো autoএবংscroll

টুলটিপ পজিশন স্বয়ংক্রিয়ভাবে পরিবর্তন করার চেষ্টা করে যখন কোনো প্যারেন্ট কন্টেনারে আমাদের থাকে overflow: autoবা overflow: scrollপছন্দ .table-responsiveকরে, কিন্তু তারপরও আসল প্লেসমেন্টের অবস্থান বজায় রাখে। boundaryসমাধান করতে, ডিফল্ট মান ব্যতীত অন্য কিছুতে বিকল্প সেট করুন 'scrollParent', যেমন 'window':

$('#example').tooltip({ boundary: 'window' })

মার্কআপ

একটি টুলটিপের জন্য প্রয়োজনীয় মার্কআপ শুধুমাত্র একটি dataবৈশিষ্ট্য এবং titleHTML উপাদানে আপনি একটি টুলটিপ পেতে চান৷ একটি টুলটিপের জেনারেট করা মার্কআপটি বেশ সহজ, যদিও এটির জন্য একটি অবস্থানের প্রয়োজন হয় (ডিফল্টরূপে, 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=""।

মনে রাখবেন যে নিরাপত্তার কারণে sanitize, sanitizeFnএবং whiteListবিকল্পগুলি ডেটা বৈশিষ্ট্যগুলি ব্যবহার করে সরবরাহ করা যাবে না।

নাম টাইপ ডিফল্ট বর্ণনা
অ্যানিমেশন বুলিয়ান সত্য টুলটিপে একটি CSS ফেইড ট্রানজিশন প্রয়োগ করুন
ধারক স্ট্রিং | উপাদান | মিথ্যা মিথ্যা

একটি নির্দিষ্ট উপাদানে টুলটিপ যুক্ত করে। উদাহরণ: container: 'body'. এই বিকল্পটি বিশেষভাবে উপযোগী যে এটি আপনাকে নথির প্রবাহে টুলটিপকে ট্রিগারিং এলিমেন্টের কাছাকাছি অবস্থান করতে দেয় - যা একটি উইন্ডোর আকার পরিবর্তনের সময় টুলটিপটিকে ট্রিগারিং উপাদান থেকে দূরে ভাসতে বাধা দেবে।
বিলম্ব সংখ্যা | বস্তু 0

টুলটিপ (ms) দেখানো এবং লুকানো বিলম্ব - ম্যানুয়াল ট্রিগার প্রকারে প্রযোজ্য নয়

যদি একটি নম্বর সরবরাহ করা হয়, বিলম্ব লুকান/দেখানো উভয় ক্ষেত্রেই প্রয়োগ করা হয়

বস্তুর গঠন হল:delay: { "show": 500, "hide": 100 }
html বুলিয়ান মিথ্যা

টুলটিপে HTML এর অনুমতি দিন।

যদি সত্য হয়, টুলটিপে HTML ট্যাগগুলি টুলটিপে titleরেন্ডার করা হবে। মিথ্যা হলে, textDOM-এ বিষয়বস্তু সন্নিবেশ করতে jQuery-এর পদ্ধতি ব্যবহার করা হবে।

আপনি যদি XSS আক্রমণ সম্পর্কে চিন্তিত হন তবে পাঠ্য ব্যবহার করুন৷
বসানো স্ট্রিং | ফাংশন 'শীর্ষ'

টুলটিপ কিভাবে অবস্থান করবেন - স্বয়ংক্রিয় | শীর্ষ | নীচে | বাম | অধিকার
যখন autoনির্দিষ্ট করা হয়, এটি গতিশীলভাবে টুলটিপকে পুনর্বিন্যাস করবে।

প্লেসমেন্ট নির্ধারণ করতে যখন একটি ফাংশন ব্যবহার করা হয়, তখন এটিকে টুলটিপ DOM নোডের সাথে প্রথম আর্গুমেন্ট এবং ট্রিগারিং উপাদান DOM নোডটিকে দ্বিতীয় হিসাবে বলা হয়। thisপ্রসঙ্গ টুলটিপ উদাহরণে সেট করা আছে ।
নির্বাচক স্ট্রিং | মিথ্যা মিথ্যা যদি একটি নির্বাচক প্রদান করা হয়, টুলটিপ বস্তুগুলি নির্দিষ্ট লক্ষ্যগুলিতে অর্পণ করা হবে। অনুশীলনে, এটি গতিশীলভাবে যুক্ত DOM উপাদানগুলিতে টুলটিপ প্রয়োগ করতে ব্যবহৃত হয় ( jQuery.onসমর্থন)। এটি এবং একটি তথ্যপূর্ণ উদাহরণ দেখুন ।
টেমপ্লেট স্ট্রিং '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

টুলটিপ তৈরি করার সময় ব্যবহার করার জন্য বেস HTML।

টুলটিপ এর titleমধ্যে ইনজেকশন করা হবে .tooltip-inner.

.arrowটুলটিপের তীর হয়ে যাবে।

সবচেয়ে বাইরের মোড়কের উপাদানটিতে .tooltipক্লাস এবং role="tooltip".
শিরোনাম স্ট্রিং | উপাদান | ফাংশন '

titleঅ্যাট্রিবিউট উপস্থিত না থাকলে ডিফল্ট শিরোনাম মান ।

thisযদি একটি ফাংশন দেওয়া হয়, তাহলে টুলটিপটি যে উপাদানটির সাথে সংযুক্ত আছে তার রেফারেন্স সেট সহ এটিকে বলা হবে ।
ট্রিগার স্ট্রিং 'হোভার ফোকাস'

টুলটিপ কিভাবে ট্রিগার হয় - ক্লিক করুন | হোভার | ফোকাস | ম্যানুয়াল আপনি একাধিক ট্রিগার পাস করতে পারেন; একটি স্থান দিয়ে তাদের আলাদা করুন।

'manual'নির্দেশ করে যে টুলটিপটি .tooltip('show'), .tooltip('hide')এবং .tooltip('toggle')পদ্ধতির মাধ্যমে প্রোগ্রাম্যাটিকভাবে ট্রিগার করা হবে; এই মান অন্য কোনো ট্রিগার সঙ্গে মিলিত করা যাবে না.

'hover'নিজে থেকেই টুলটিপ তৈরি করবে যা কীবোর্ডের মাধ্যমে ট্রিগার করা যাবে না, এবং শুধুমাত্র তখনই ব্যবহার করা উচিত যদি কীবোর্ড ব্যবহারকারীদের জন্য একই তথ্য জানানোর বিকল্প পদ্ধতি উপস্থিত থাকে।
অফসেট সংখ্যা | স্ট্রিং | ফাংশন 0

টুলটিপ এর টার্গেটের সাথে সম্পর্কিত অফসেট।

যখন একটি ফাংশন অফসেট নির্ধারণ করতে ব্যবহার করা হয়, তখন এটিকে প্রথম আর্গুমেন্ট হিসাবে অফসেট ডেটা ধারণকারী বস্তুর সাথে ডাকা হয়। ফাংশনটি অবশ্যই একই কাঠামো সহ একটি অবজেক্ট রিটার্ন করবে। ট্রিগারিং উপাদান DOM নোড দ্বিতীয় আর্গুমেন্ট হিসাবে পাস করা হয়.

আরও তথ্যের জন্য Popper.js এর অফসেট ডক্স দেখুন ।
ফলব্যাক প্লেসমেন্ট স্ট্রিং | অ্যারে 'উল্টানো' পপার ফলব্যাকে কোন অবস্থান ব্যবহার করবে তা নির্দিষ্ট করার অনুমতি দিন। আরও তথ্যের জন্য Popper.js এর আচরণ ডক্স দেখুন
সীমানা স্ট্রিং | উপাদান 'স্ক্রোল প্যারেন্ট' টুলটিপের ওভারফ্লো সীমাবদ্ধতা। 'viewport', 'window', 'scrollParent', বা একটি HTMLElement রেফারেন্স (শুধুমাত্র জাভাস্ক্রিপ্ট) এর মান গ্রহণ করে । আরও তথ্যের জন্য Popper.js এর প্রতিরোধ ওভারফ্লো ডক্স দেখুন ।
পরিষ্কার বুলিয়ান সত্য স্যানিটাইজেশন সক্ষম বা অক্ষম করুন। সক্রিয় হলে 'template'এবং 'title'বিকল্পগুলি স্যানিটাইজ করা হবে।
সাদা তালিকা বস্তু ডিফল্ট মান বস্তু যা অনুমোদিত বৈশিষ্ট্য এবং ট্যাগ ধারণ করে
sanitizeFn শূন্য | ফাংশন শূন্য এখানে আপনি আপনার নিজস্ব স্যানিটাইজ ফাংশন সরবরাহ করতে পারেন। আপনি স্যানিটাইজেশন সঞ্চালনের জন্য একটি ডেডিকেটেড লাইব্রেরি ব্যবহার করতে পছন্দ করলে এটি কার্যকর হতে পারে।
popperConfig শূন্য | বস্তু শূন্য Bootstrap এর ডিফল্ট Popper.js কনফিগারেশন পরিবর্তন করতে, Popper.js এর কনফিগারেশন দেখুন

পৃথক টুলটিপের জন্য ডেটা বৈশিষ্ট্য

পৃথক টুলটিপগুলির জন্য বিকল্পগুলি ডেটা অ্যাট্রিবিউট ব্যবহারের মাধ্যমে নির্দিষ্ট করা যেতে পারে, যেমন উপরে ব্যাখ্যা করা হয়েছে।

পদ্ধতি

অ্যাসিঙ্ক্রোনাস পদ্ধতি এবং রূপান্তর

সমস্ত API পদ্ধতি অসিঙ্ক্রোনাস এবং একটি রূপান্তর শুরু করে । রূপান্তর শুরু হওয়ার সাথে সাথেই কিন্তু এটি শেষ হওয়ার আগেই তারা কলারের কাছে ফিরে আসে । উপরন্তু, একটি রূপান্তরকারী উপাদানের উপর একটি পদ্ধতি কল উপেক্ষা করা হবে ।

আরও তথ্যের জন্য আমাদের জাভাস্ক্রিপ্ট ডকুমেন্টেশন দেখুন ।

$().tooltip(options)

একটি উপাদান সংগ্রহে একটি টুলটিপ হ্যান্ডলার সংযুক্ত করে।

.tooltip('show')

একটি উপাদানের টুলটিপ প্রকাশ করে। টুলটিপ আসলে দেখানোর আগে (অর্থাৎ shown.bs.tooltipঘটনা ঘটার আগে) কলারের কাছে ফিরে আসে। এটি টুলটিপের একটি "ম্যানুয়াল" ট্রিগারিং হিসাবে বিবেচিত হয়। শূন্য-দৈর্ঘ্যের শিরোনাম সহ টুলটিপগুলি কখনই প্রদর্শিত হয় না।

$('#element').tooltip('show')

.tooltip('hide')

একটি উপাদানের টুলটিপ লুকিয়ে রাখে। টুলটিপ আসলে লুকিয়ে রাখার আগে (অর্থাৎ hidden.bs.tooltipঘটনা ঘটার আগে) কলারের কাছে ফিরে আসে। এটি টুলটিপের একটি "ম্যানুয়াল" ট্রিগারিং হিসাবে বিবেচিত হয়।

$('#element').tooltip('hide')

.tooltip('toggle')

একটি উপাদানের টুলটিপ টগল করে। টুলটিপ আসলে দেখানো বা লুকানো হওয়ার আগে কলারের কাছে ফিরে আসে (অর্থাৎ shown.bs.tooltipবা hidden.bs.tooltipঘটনা ঘটার আগে)। এটি টুলটিপের একটি "ম্যানুয়াল" ট্রিগারিং হিসাবে বিবেচিত হয়।

$('#element').tooltip('toggle')

.tooltip('dispose')

একটি উপাদানের টুলটিপ লুকিয়ে রাখে এবং ধ্বংস করে। যে টুলটিপগুলি ডেলিগেশন ব্যবহার করে (যা বিকল্পটি ব্যবহার করেselector তৈরি করা হয় ) বংশধর ট্রিগার উপাদানগুলিতে পৃথকভাবে ধ্বংস করা যাবে না।

$('#element').tooltip('dispose')

.tooltip('enable')

একটি উপাদানের টুলটিপ দেখানোর ক্ষমতা দেয়। টুলটিপ ডিফল্টরূপে সক্রিয় করা হয়.

$('#element').tooltip('enable')

.tooltip('disable')

একটি উপাদানের টুলটিপ দেখানোর ক্ষমতা সরিয়ে দেয়। টুলটিপটি শুধুমাত্র দেখাতে সক্ষম হবে যদি এটি পুনরায় সক্রিয় করা হয়।

$('#element').tooltip('disable')

.tooltip('toggleEnabled')

একটি উপাদানের টুলটিপ দেখানো বা লুকানোর ক্ষমতা টগল করে।

$('#element').tooltip('toggleEnabled')

.tooltip('update')

একটি উপাদানের টুলটিপের অবস্থান আপডেট করে।

$('#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...
})