সঁজুলিৰ টিপছ
স্থানীয় শিৰোনাম সংৰক্ষণৰ বাবে এনিমেচন আৰু ডাটা-বৈশিষ্ট্যসমূহৰ বাবে CSS3 ব্যৱহাৰ কৰি CSS আৰু JavaScript ৰ সৈতে স্বনিৰ্বাচিত বুটষ্ট্ৰেপ সঁজুলি টিপসমূহ যোগ কৰাৰ বাবে দস্তাবেজ আৰু উদাহৰণসমূহ।
অভাৰভিউ
সঁজুলি টিপ প্লাগ-ইন ব্যৱহাৰ কৰাৰ সময়ত জানিবলগীয়া কথাবোৰ:
- সঁজুলিটিপসমূহ অৱস্থানৰ বাবে তৃতীয় পক্ষৰ লাইব্ৰেৰী 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;
আপোনাৰ s ত ব্যৱহাৰ কৰক ।<a>
- সঁজুলিটিপসমূহ সিহতৰ সংশ্লিষ্ট উপাদানসমূহ DOM ৰ পৰা আঁতৰোৱাৰ আগতে লুকুৱাব লাগিব।
- এটা ছাঁ DOM ৰ ভিতৰৰ এটা উপাদানৰ বাবে টুলটিপসমূহ ট্ৰিগাৰ কৰিব পাৰি।
এই উপাদানৰ এনিমেচন প্ৰভাৱ prefers-reduced-motion
মাধ্যম প্ৰশ্নৰ ওপৰত নিৰ্ভৰশীল। আমাৰ অভিগম্যতা নথিপত্ৰৰ হ্ৰাস কৰা গতি অংশ চাওক ।
সেই সকলোবোৰ পাইছেনে? মহান, কিছুমান উদাহৰণৰ সৈতে তেওঁলোকে কেনেকৈ কাম কৰে চাওঁ আহক।
উদাহৰণ: সকলোতে সঁজুলি টিপসমূহ সামৰ্থবান কৰক
এটা পৃষ্ঠাত সকলো সঁজুলি টিপ আৰম্ভ কৰাৰ এটা উপায় হ'ব সিহতক সিহঁতৰ data-toggle
বৈশিষ্ট্য অনুসৰি নিৰ্ব্বাচন কৰা:
উদাহৰণ
সঁজুলি টিপছ চাবলৈ তলৰ লিংকসমূহৰ ওপৰত হাউভাৰ কৰক:
টাইট পেণ্ট নেক্সট লেভেল কেফিয়েহ আপুনি হয়তো শুনা নাই। ফটো বুথ দাড়ি কেঁচা ডেনিম লেটাৰপ্ৰেছ ভেগান মেচেঞ্জাৰ বেগ stumptown. ফাৰ্ম-টু-টেবল seitan, mcsweeney's fixie বহনক্ষম quinoa 8-বিট আমেৰিকান পোছাক এটা টেৰী richardson vinyl chambray আছে. দাড়ি ষ্টাম্পটাউন, কাৰ্ডিগান বানহ মি লোমো থাণ্ডাৰকেটছ। টোফু বায়'ডিজেল উইলিয়ামছবাৰ্গ মাৰ্ফা, চাৰিটা লোকো mcsweeney's ক্লিনজ ভেগান chambray. 'এটা সঁচাকৈয়ে বিদ্ৰুপৰ শিল্পী যিয়েই নহওক কিয় keytar , scenester ফাৰ্ম-টু-টেবুল banksy অষ্টিন টুইটাৰ হেণ্ডেল freegan cred কেঁচা ডেনিম একক-উৎপত্তি কফি ভাইৰেল.
চাৰিটা সঁজুলি টিপছৰ দিশ চাবলৈ তলৰ বুটামসমূহৰ ওপৰত মাউছ কৰক: ওপৰ, সোঁ, তললৈ, আৰু বাওঁ।
আৰু কাষ্টম HTML যোগ কৰা হৈছে:
ব্যৱহাৰ
সঁজুলিটিপ প্লাগ-ইনে চাহিদাৰ ওপৰত বিষয়বস্তু আৰু মাৰ্কআপ সৃষ্টি কৰে, আৰু অবিকল্পিতভাৱে সঁজুলিটিপসমূহ সিহতৰ ট্ৰিগাৰ উপাদানৰ পিছত ৰাখে।
জাভাস্ক্রিপ্টৰ যোগেদি সঁজুলিটিপ ট্ৰিগাৰ কৰক:
অভাৰফ্ল' auto
আৰুscroll
সঁজুলিটিপৰ অৱস্থানে স্বয়ংক্ৰিয়ভাৱে সলনি কৰিবলৈ চেষ্টা কৰে যেতিয়া এটা মূল ধাৰক আমাৰ আছে overflow: auto
বা overflow: scroll
ভাল পায় .table-responsive
, কিন্তু তথাপিও মূল স্থানৰ অৱস্থান ৰাখে। সমাধান কৰিবলে, boundary
বিকল্পক অবিকল্পিত মানৰ বাহিৰে অন্য যিকোনো লে সংহতি কৰক, 'scrollParent'
, যেনে 'window'
:
মাৰ্কআপ
এটা সঁজুলিটিপৰ বাবে প্ৰয়োজনীয় মাৰ্কআপ কেৱল এটা data
বৈশিষ্ট্য আৰু title
HTML উপাদানত আপুনি এটা সঁজুলিটিপ পাব বিচাৰে। এটা সঁজুলিটিপৰ সৃষ্টি কৰা মাৰ্কআপ যথেষ্ট সহজ, যদিও ইয়াৰ বাবে এটা অৱস্থানৰ প্ৰয়োজন (অবিকল্পিতভাৱে, top
প্লাগ-ইনৰ দ্বাৰা সংহতি কৰা)।
কিবৰ্ড আৰু সহায়ক প্ৰযুক্তি ব্যৱহাৰকাৰীসকলৰ বাবে সঁজুলি টিপসমূহ কাম কৰা
আপুনি কেৱল HTML উপাদানসমূহত সঁজুলি টিপসমূহ যোগ কৰিব লাগে যি পৰম্পৰাগতভাৱে কিবৰ্ড-কেন্দ্ৰিক আৰু পাৰস্পৰিক (যেনে সংযোগসমূহ বা প্ৰপত্ৰ নিয়ন্ত্ৰণসমূহ)। যদিও ইচ্ছাকৃত HTML উপাদানসমূহক (যেনে <span>
s) বৈশিষ্ট্য যোগ কৰি কেন্দ্ৰীভূত কৰিব পাৰি tabindex="0"
, ই কিবৰ্ড ব্যৱহাৰকাৰীসকলৰ বাবে অ-পাৰস্পৰিক উপাদানসমূহত সম্ভাৱ্যভাৱে বিৰক্তিকৰ আৰু বিভ্ৰান্তিকৰ টেব ষ্টপসমূহ যোগ কৰিব, আৰু বেছিভাগ সহায়ক প্ৰযুক্তিয়ে বৰ্তমানে এই পৰিস্থিতিত সঁজুলিটিপ ঘোষণা নকৰে। অতিৰিক্তভাৱে, কেৱল আপোনাৰ সঁজুলিটিপৰ বাবে ট্ৰিগাৰ হিচাপে নিৰ্ভৰ নকৰিব hover
, কাৰণ ই আপোনাৰ সঁজুলিটিপসমূহক কিবৰ্ড ব্যৱহাৰকাৰীসকলৰ বাবে ট্ৰিগাৰ কৰাটো অসম্ভৱ কৰি তুলিব।
নিষ্ক্ৰিয় উপাদানসমূহ
বৈশিষ্ট্য থকা উপাদানসমূহ disabled
পাৰস্পৰিক নহয়, অৰ্থাৎ ব্যৱহাৰকাৰীসকলে এটা সঁজুলিটিপ (বা পপঅভাৰ) ট্ৰিগাৰ কৰিবলে সিহতক ফ'কাচ, হোভাৰ, বা ক্লিক কৰিব নোৱাৰে। এটা সমাধান হিচাপে, আপুনি এটা ৰেপাৰৰ পৰা সঁজুলিটিপ ট্ৰিগাৰ কৰিব বিচাৰিব <div>
বা <span>
, আদৰ্শভাৱে ব্যৱহাৰ কৰি কিবৰ্ড-ফোকাচযোগ্য কৰা , আৰু নিষ্ক্ৰিয় উপাদানত tabindex="0"
অভাৰৰাইড কৰিব বিচাৰিব।pointer-events
বিকল্পসমূহ
বিকল্পসমূহ ডাটা এট্ৰিবিউট বা জাভাস্ক্রিপ্টৰ যোগেদি পাছ কৰিব পাৰি। তথ্য বৈশিষ্ট্যসমূহৰ বাবে, বিকল্পৰ নাম ত সংযুক্ত কৰক data-
, যেনে data-animation=""
.
মন কৰিব যে সুৰক্ষাৰ কাৰণে sanitize
, sanitizeFn
আৰু whiteList
বিকল্পসমূহ তথ্য বৈশিষ্ট্যসমূহ ব্যৱহাৰ কৰি যোগান ধৰিব নোৱাৰি।
নাম | প্ৰকাৰ | ডিফল্ট | বিৱৰণ |
---|---|---|---|
এনিমেচন | বুলিয়ান | সঁচা | সঁজুলিটিপত এটা CSS ফেড পৰিৱৰ্তন প্ৰয়োগ কৰক |
পাত্ৰ | ষ্ট্ৰিং | উপাদান | মিছা | মিছা | এটা নিৰ্দিষ্ট উপাদানত সঁজুলিটিপ সংযোজন কৰে। উদাহৰণ: |
পলম কৰা | সংখ্যা | বস্তু | ০ | সঁজুলিটিপ দেখুৱা আৰু লুকুৱাবলৈ বিলম্ব (ms) - হস্তচালিত ট্ৰিগাৰ ধৰণৰ বাবে প্ৰযোজ্য নহয় যদি এটা নম্বৰ যোগান ধৰা হয়, তেন্তে লুকুৱাই/দেখা দুয়োটাতে বিলম্ব প্ৰয়োগ কৰা হয় বস্তুৰ গঠন হ'ল: |
html | বুলিয়ান | মিছা | টুলটিপত HTML ৰ অনুমতি দিয়ক। যদি সঁচা, সঁজুলি টিপত থকা HTML টেগসমূহ সঁজুলি টিপত XSS আক্ৰমণৰ বাবে চিন্তিত হ'লে লিখা ব্যৱহাৰ কৰক। |
প্লেচমেণ্ট | ষ্ট্ৰিং | অনুষ্ঠান | 'শীৰ্ষ' | টুলটিপ কেনেকৈ পজিচন কৰিব - auto | শীৰ্ষ | তলৰ | বাওঁফালে | শুদ্ধ. যেতিয়া এটা ফাংচন স্থাপন নিৰ্ধাৰণ কৰিবলৈ ব্যৱহাৰ কৰা হয়, ইয়াক সঁজুলিটিপ DOM ন'ডক ইয়াৰ প্ৰথম যুক্তি হিচাপে আৰু ট্ৰিগাৰিং উপাদান DOM ন'ডক ইয়াৰ দ্বিতীয় হিচাপে লৈ কল কৰা হয়। |
নিৰ্বাচক | ষ্ট্ৰিং | মিছা | মিছা | যদি এটা নিৰ্বাচক প্ৰদান কৰা হয়, সঁজুলিটিপ বস্তুসমূহক ধাৰ্য্য কৰা লক্ষ্যসমূহলে প্ৰত্যায়িত কৰা হ'ব। কাৰ্য্যত, ইয়াক গতিশীলভাৱে যোগ কৰা DOM উপাদানসমূহলে সঁজুলি টিপসমূহ প্ৰয়োগ কৰিবলেও ব্যৱহাৰ কৰা হয় ( jQuery.on সমৰ্থন)। এইটো আৰু এটা তথ্যসমৃদ্ধ উদাহৰণ চাওক । |
সাঁচ | তাঁৰ | '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' |
সঁজুলিটিপ সৃষ্টি কৰাৰ সময়ত ব্যৱহাৰ কৰিবলৈ HTML ভিত্তি কৰক। টুলটিপৰ
আটাইতকৈ বাহিৰৰ ৰেপাৰ উপাদানটোৰ |
অলপ | ষ্ট্ৰিং | উপাদান | অনুষ্ঠান | '' |
|
ট্ৰিগাৰ | তাঁৰ | 'hover focus' | টুলটিপ কেনেকৈ ট্ৰিগাৰ কৰা হয় - | ক্লিক কৰক hover | ফোকাচ | হাতপুথি. আপুনি একাধিক ট্ৰিগাৰ পাছ কৰিব পাৰে; ইহঁতক এটা স্থান দি পৃথক কৰক।
|
অফছেট | সংখ্যা | ষ্ট্ৰিং | অনুষ্ঠান | ০ | ইয়াৰ লক্ষ্যৰ সাপেক্ষে সঁজুলিটিপৰ অফছেট। যেতিয়া এটা ফাংচন অফছেট নিৰ্ধাৰণ কৰিবলৈ ব্যৱহাৰ কৰা হয়, তেতিয়া ইয়াক অফছেট ডাটা থকা এটা বস্তুক ইয়াৰ প্ৰথম আৰ্গুমেণ্ট হিচাপে লৈ কল কৰা হয়। ফাংচনে একে গঠনৰ এটা বস্তু ঘূৰাই দিব লাগিব। ট্ৰিগাৰিং উপাদান DOM ন'ডক দ্বিতীয় যুক্তি হিচাপে পাছ কৰা হয়। অধিক তথ্যৰ বাবে Popper.js ৰ অফছেট নথিপত্ৰ চাওক । |
fallbackপ্লেচমেন্ট | ষ্ট্ৰিং | এৰে | 'ওলোটা কৰা' | ফ'লবেকত পপাৰে কোনটো অৱস্থান ব্যৱহাৰ কৰিব সেইটো নিৰ্দিষ্ট কৰিবলৈ অনুমতি দিয়ক। অধিক তথ্যৰ বাবে Popper.js ৰ আচৰণ নথিপত্ৰসমূহ চাওক |
সীমা | ষ্ট্ৰিং | উপাদান | 'scrollParent' | সঁজুলিটিপৰ অভাৰফ্ল' বাধা সীমা। 'viewport' , 'window' , 'scrollParent' , বা এটা HTMLElement প্ৰসংগ (কেৱল জাভাস্ক্রিপ্ট) ৰ মানসমূহ গ্ৰহণ কৰে । অধিক তথ্যৰ বাবে Popper.js ৰ preventOverflow docs চাওক । |
চেনিটাইজ কৰক | বুলিয়ান | সঁচা | চেনিটাইজেচন সক্ষম বা নিষ্ক্ৰিয় কৰক। যদি সক্ৰিয় কৰা হয় 'template' আৰু 'title' বিকল্পসমূহ ছেনিটাইজ কৰা হ’ব। |
whiteList | বস্তু | অবিকল্পিত মান | যিটো বস্তুত অনুমোদিত বৈশিষ্ট্য আৰু টেগ থাকে |
চেনিটাইজFn | শূন্য | অনুষ্ঠান | খালী | ইয়াত আপুনি নিজাকৈ চেনিটাইজ ফাংচন যোগান ধৰিব পাৰে। যদি আপুনি চেনিটাইজেচন কৰিবলৈ এটা নিৰ্দিষ্ট লাইব্ৰেৰী ব্যৱহাৰ কৰিব বিচাৰে তেন্তে ই উপযোগী হ’ব পাৰে। |
popperConfig | শূন্য | বস্তু | খালী | Bootstrap ৰ অবিকল্পিত Popper.js বিন্যাস সলনি কৰিবলে, Popper.js ৰ বিন্যাস চাওক |
ব্যক্তিগত সঁজুলি টিপসমূহৰ বাবে তথ্য বৈশিষ্ট্যসমূহ
ব্যক্তিগত সঁজুলি টিপসমূহৰ বাবে বিকল্পসমূহ বিকল্পভাৱে তথ্য বৈশিষ্ট্যসমূহৰ ব্যৱহাৰৰ যোগেদি ধাৰ্য্য কৰিব পাৰি, ওপৰত ব্যাখ্যা কৰা ধৰণে।
পদ্ধতিসমূহ
এচিংক্ৰ’নাছ পদ্ধতি আৰু পৰিৱৰ্তন
সকলো API পদ্ধতি এচিনক্ৰ'নাছ আৰু এটা পৰিৱৰ্তন আৰম্ভ কৰে । ট্ৰেঞ্জিচন আৰম্ভ হোৱাৰ লগে লগে কিন্তু শেষ হোৱাৰ আগতেই তেওঁলোকে কল কৰাজনৰ ওচৰলৈ উভতি যায় ৷ ইয়াৰ উপৰিও, এটা পৰিৱৰ্তনশীল উপাদানত এটা পদ্ধতি কল আওকাণ কৰা হ'ব ।
$().tooltip(options)
এটা উপাদান সংগ্ৰহৰ সৈতে এটা সঁজুলিটিপ নিয়ন্ত্ৰক সংযুক্ত কৰে।
.tooltip('show')
এটা উপাদানৰ সঁজুলিটিপ প্ৰকাশ কৰে। সঁজুলিটিপ প্ৰকৃততে দেখুওৱাৰ আগতে (অৰ্থাৎ shown.bs.tooltip
ইভেন্টটো ঘটাৰ আগতে) কলাৰলৈ উভতি যায়। ইয়াক টুলটিপৰ “মেনুৱেল” ট্ৰিগাৰিং বুলি গণ্য কৰা হয়। শূন্য-দৈৰ্ঘ্যৰ শিৰোনাম থকা সঁজুলিটিপসমূহ কেতিয়াও প্ৰদৰ্শিত নহয়।
.tooltip('hide')
এটা উপাদানৰ সঁজুলিটিপ লুকুৱাই ৰাখে। সঁজুলিটিপ প্ৰকৃততে লুকুৱাই ৰখাৰ আগতে (অৰ্থাৎ hidden.bs.tooltip
ইভেন্টটো ঘটাৰ আগতে) কলাৰলৈ উভতি যায়। ইয়াক টুলটিপৰ “মেনুৱেল” ট্ৰিগাৰিং বুলি গণ্য কৰা হয়।
.tooltip('toggle')
এটা উপাদানৰ সঁজুলিটিপ টগল কৰে। সঁজুলিটিপ প্ৰকৃততে দেখুৱা বা লুকুৱাই ৰখাৰ আগতে (অৰ্থাৎ shown.bs.tooltip
বা hidden.bs.tooltip
ইভেন্ট ঘটাৰ আগতে) কলাৰলৈ উভতি যায়। ইয়াক টুলটিপৰ “মেনুৱেল” ট্ৰিগাৰিং বুলি গণ্য কৰা হয়।
.tooltip('dispose')
এটা উপাদানৰ সঁজুলি টিপ লুকুৱাই ৰাখে আৰু ধ্বংস কৰে। ডেলিগেচন ব্যৱহাৰ কৰা সঁজুলিটিপসমূহ (যিসমূহ বিকল্প ব্যৱহাৰ কৰিselector
সৃষ্টি কৰা হয় ) বংশধৰ ট্ৰিগাৰ উপাদানসমূহত পৃথকে পৃথকে ধ্বংস কৰিব নোৱাৰি।
.tooltip('enable')
এটা উপাদানৰ সঁজুলিটিপক দেখুৱাব পৰা ক্ষমতা দিয়ে। সঁজুলি টিপসমূহ অবিকল্পিতভাৱে সামৰ্থবান কৰা হৈছে।
.tooltip('disable')
এটা উপাদানৰ সঁজুলিটিপ দেখুৱাবলগীয়া ক্ষমতা আঁতৰায়। সঁজুলিটিপটো পুনৰ সামৰ্থবান কৰিলেহে দেখুৱাব পাৰিব।
.tooltip('toggleEnabled')
এটা উপাদানৰ সঁজুলিটিপ দেখুৱা বা লুকুৱাব পৰা ক্ষমতা টগল কৰে।
.tooltip('update')
এটা উপাদানৰ সঁজুলিটিপৰ অৱস্থান আপডেইট কৰে।
ইভেন্টসমূহ
ইভেন্টৰ ধৰণ | বিৱৰণ |
---|---|
শ্ব'.বি.এছ.টুলটিপ | এই ইভেন্ট তৎক্ষণাত ফায়াৰ হয় যেতিয়া show ইনষ্টেন্স পদ্ধতি কল কৰা হয়। |
shown.bs.টুলটিপ | এই ইভেন্টটো গুলিয়াই দিয়া হয় যেতিয়া সঁজুলিটিপ ব্যৱহাৰকাৰীৰ বাবে দৃশ্যমান কৰা হয় (CSS পৰিৱৰ্তনসমূহ সম্পূৰ্ণ হোৱালৈ অপেক্ষা কৰিব)। |
hide.bs.টুলটিপ | এই ইভেন্ট তৎক্ষণাত ফায়াৰ কৰা হয় যেতিয়া hide ইনষ্টেন্স পদ্ধতি কল কৰা হয়। |
hidden.bs.টুলটিপ | এই ইভেন্টটো গুলিয়াই দিয়া হয় যেতিয়া সঁজুলিটিপ ব্যৱহাৰকাৰীৰ পৰা লুকুৱাই ৰখা শেষ হয় (CSS পৰিবৰ্তনসমূহ সম্পূৰ্ণ হ'বলৈ অপেক্ষা কৰিব)। |
inserted.bs.টুলটিপ কৰা হৈছে | এই ইভেন্টক ইভেন্টৰ পিছত ফায়াৰ কৰা হয় show.bs.tooltip যেতিয়া সঁজুলিটিপ সাঁচ DOM ত যোগ কৰা হয়। |