ٹول ٹپس
سی ایس ایس اور جاوا اسکرپٹ کے ساتھ حسب ضرورت بوٹسٹریپ ٹول ٹِپس کو شامل کرنے کے لیے دستاویزات اور مثالیں CSS3 کا استعمال کرتے ہوئے اینیمیشنز اور مقامی ٹائٹل اسٹوریج کے لیے ڈیٹا-انتسابات۔
جائزہ
ٹول ٹپ پلگ ان کا استعمال کرتے وقت جاننے کی چیزیں:
- ٹول ٹپس پوزیشننگ کے لیے 3rd پارٹی لائبریری Popper پر انحصار کرتے ہیں ۔ ٹول ٹپس کے کام کرنے کے لیے آپ کو bootstrap.js سے پہلے popper.min.js شامل کرنا چاہیے یا استعمال کریں
bootstrap.bundle.min.js
/bootstrap.bundle.js
جس میں Popper شامل ہے! - اگر آپ ہمارا جاوا اسکرپٹ ماخذ سے بنا رہے ہیں، تو اس کی ضرورت ہے
util.js
۔ - ٹول ٹپس کارکردگی کی وجوہات کی بناء پر آپٹ ان ہوتی ہیں، لہذا آپ کو خود ان کی ابتدا کرنی چاہیے ۔
- زیرو لینتھ ٹائٹلز والے ٹول ٹپس کبھی ظاہر نہیں ہوتے ہیں۔
container: 'body'
مزید پیچیدہ اجزاء (جیسے ہمارے ان پٹ گروپس، بٹن گروپس وغیرہ) میں رینڈرنگ کے مسائل سے بچنے کے لیے وضاحت کریں۔- پوشیدہ عناصر پر ٹول ٹپس کو متحرک کرنا کام نہیں کرے گا۔
- ٹول ٹپس
.disabled
یاdisabled
عناصر کو ریپر عنصر پر متحرک کیا جانا چاہیے۔ - متعدد لائنوں پر پھیلے ہوئے ہائپر لنکس سے متحرک ہونے پر، ٹول ٹِپس کو مرکز میں رکھا جائے گا۔ اس رویے سے بچنے کے لیے
white-space: nowrap;
اپنے s پر استعمال کریں ۔<a>
- ٹول ٹپس کو چھپایا جانا چاہیے اس سے پہلے کہ ان کے متعلقہ عناصر کو DOM سے ہٹا دیا جائے۔
- ٹول ٹپس کو شیڈو DOM کے اندر موجود عنصر کی بدولت متحرک کیا جا سکتا ہے۔
prefers-reduced-motion
اس جزو کا اینیمیشن اثر میڈیا کے استفسار
پر منحصر ہے
۔ ہماری ایکسیسبیلٹی دستاویزات کا کم موشن سیکشن دیکھیں
۔
وہ سب مل گیا؟ بہت اچھا، آئیے دیکھتے ہیں کہ وہ کچھ مثالوں کے ساتھ کیسے کام کرتے ہیں۔
مثال: ٹول ٹپس کو ہر جگہ فعال کریں۔
کسی صفحے پر تمام ٹول ٹپس کو شروع کرنے کا ایک طریقہ یہ ہوگا کہ انہیں ان کی data-toggle
صفت کے مطابق منتخب کیا جائے:
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
مثالیں
ٹول ٹپس دیکھنے کے لیے نیچے دیے گئے لنکس پر ہوور کریں:
ٹول ٹپس کے ساتھ کچھ ان لائن لنکس کو ظاہر کرنے کے لیے پلیس ہولڈر کا متن ۔ یہ اب صرف فلر ہے، کوئی قاتل نہیں۔ اصل متن کی موجودگی کی نقل کرنے کے لیے مواد یہاں رکھا گیا ہے ۔ اور یہ سب صرف آپ کو اندازہ دینے کے لیے کہ جب حقیقی دنیا کے حالات میں استعمال کیا جائے تو ٹول ٹِپس کیسی نظر آئیں گی۔ تو امید ہے کہ اب آپ نے دیکھا ہوگا کہ لنکس پر یہ ٹول ٹپس عملی طور پر کیسے کام کر سکتی ہیں، ایک بار جب آپ انہیں اپنی سائٹ یا پروجیکٹ پر استعمال کریں۔
ٹول ٹپس کی چار سمتیں دیکھنے کے لیے نیچے کے بٹنوں پر ہوور کریں: اوپر، دائیں، نیچے اور بائیں۔
<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>
اور حسب ضرورت HTML کے ساتھ شامل کیا گیا:
<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
وصف ہے اور 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>
اختیارات
اختیارات کو ڈیٹا انتساب یا JavaScript کے ذریعے منتقل کیا جا سکتا ہے۔ ڈیٹا کی خصوصیات کے لیے، آپشن کا نام شامل کریں data-
، جیسا کہ میں data-animation=""
۔
sanitize
،
sanitizeFn
اور
whiteList
آپشنز کو ڈیٹا انتساب کا استعمال کرتے ہوئے فراہم نہیں کیا جا سکتا۔
نام | قسم | طے شدہ | تفصیل |
---|---|---|---|
حرکت پذیری | بولین | سچ ہے | ٹول ٹپ پر سی ایس ایس فیڈ ٹرانزیشن کا اطلاق کریں۔ |
کنٹینر | تار | عنصر | جھوٹا | جھوٹا | ٹول ٹپ کو ایک مخصوص عنصر میں شامل کرتا ہے۔ مثال: |
تاخیر | نمبر | چیز | 0 | ٹول ٹپ (ms) دکھانے اور چھپانے میں تاخیر - دستی ٹرگر کی قسم پر لاگو نہیں ہوتا ہے۔ اگر کوئی نمبر فراہم کیا جاتا ہے، تو چھپنے / دکھانے دونوں پر تاخیر کا اطلاق ہوتا ہے۔ آبجیکٹ کی ساخت ہے: |
html | بولین | جھوٹا | ٹول ٹپ میں HTML کی اجازت دیں۔ اگر درست ہے تو، ٹول ٹِپ میں موجود HTML ٹیگز ٹول ٹِپ اگر آپ XSS حملوں کے بارے میں فکر مند ہیں تو متن کا استعمال کریں۔ |
جگہ کا تعین | تار | فنکشن | 'اوپر' | ٹول ٹپ کی پوزیشن کیسے لگائیں - آٹو | اوپر | نیچے | بائیں | صحیح جب کسی فنکشن کو پلیسمنٹ کا تعین کرنے کے لیے استعمال کیا جاتا ہے، تو اسے ٹول ٹِپ DOM نوڈ کے ساتھ اس کی پہلی دلیل کے طور پر اور محرک عنصر DOM نوڈ کو اس کے دوسرے کے طور پر کہا جاتا ہے۔ سیاق و سباق کو |
سلیکٹر | تار | جھوٹا | جھوٹا | اگر ایک سلیکٹر فراہم کیا جاتا ہے تو، ٹول ٹپ آبجیکٹ کو مخصوص اہداف کے حوالے کر دیا جائے گا۔ jQuery.on عملی طور پر، اس کا استعمال متحرک طور پر شامل کردہ DOM عناصر ( سپورٹ) پر ٹول ٹپس کو لاگو کرنے کے لیے بھی کیا جاتا ہے ۔ یہ اور ایک معلوماتی مثال دیکھیں ۔ |
سانچے | تار | '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' |
ٹول ٹپ بناتے وقت استعمال کرنے کے لیے HTML کی بنیاد رکھیں۔ ٹول ٹِپ
سب سے بیرونی ریپر عنصر میں |
عنوان | تار | عنصر | فنکشن | '' |
اگر کوئی فنکشن دیا جاتا ہے، تو اسے اس |
محرک | تار | 'ہور فوکس' | ٹول ٹپ کو کیسے متحرک کیا جاتا ہے - کلک کریں | ہوور | توجہ مرکوز | دستی آپ متعدد محرکات کو پاس کر سکتے ہیں۔ انہیں ایک جگہ کے ساتھ الگ کریں.
|
آفسیٹ | نمبر | تار | فنکشن | 0 | اس کے ہدف کے نسبت ٹول ٹپ کا آفسیٹ۔ جب کسی فنکشن کو آفسیٹ کا تعین کرنے کے لیے استعمال کیا جاتا ہے، تو اسے پہلی دلیل کے طور پر آفسیٹ ڈیٹا پر مشتمل آبجیکٹ کے ساتھ بلایا جاتا ہے۔ فنکشن کو ایک ہی ساخت کے ساتھ ایک آبجیکٹ کو لوٹانا چاہیے۔ محرک عنصر DOM نوڈ کو دوسری دلیل کے طور پر پاس کیا جاتا ہے۔ مزید معلومات کے لیے Popper کی آفسیٹ دستاویزات دیکھیں ۔ |
فال بیک پلیسمنٹ | تار | صف | 'پلٹائیں' | یہ بتانے کی اجازت دیں کہ Popper فال بیک پر کون سی پوزیشن استعمال کرے گا۔ مزید معلومات کے لیے Popper کے رویے کی دستاویزات دیکھیں |
customClass | تار | فنکشن | '' | ٹول ٹپ کے دکھائے جانے پر اس میں کلاسز شامل کریں۔ نوٹ کریں کہ یہ کلاسز ٹیمپلیٹ میں بیان کردہ کسی بھی کلاس کے علاوہ شامل کی جائیں گی۔ متعدد کلاسز کو شامل کرنے کے لیے، انہیں خالی جگہوں سے الگ کریں: آپ ایک فنکشن بھی پاس کر سکتے ہیں جس میں اضافی کلاس کے ناموں پر مشتمل ایک سٹرنگ واپس کرنی چاہیے۔ |
حد | تار | عنصر | 'اسکرول پیرنٹ' | ٹول ٹپ کی اوور فلو رکاوٹ کی حد۔ 'viewport' , 'window' , 'scrollParent' , یا HTMLElement حوالہ (صرف JavaScript) کی اقدار کو قبول کرتا ہے ۔ مزید معلومات کے لیے Popper's preventOverflow docs دیکھیں ۔ |
جراثیم کشی | بولین | سچ ہے | سینیٹائزیشن کو فعال یا غیر فعال کریں۔ اگر چالو 'template' اور 'title' اختیارات کو صاف کیا جائے گا۔ ہمارے JavaScript دستاویزات میں سینیٹائزر سیکشن دیکھیں ۔ |
وائٹ لسٹ | چیز | پہلے سے طے شدہ قیمت | آبجیکٹ جس میں اجازت دی گئی صفات اور ٹیگز شامل ہیں۔ |
sanitizeFn | null | فنکشن | خالی | یہاں آپ اپنا سینیٹائز فنکشن فراہم کر سکتے ہیں۔ یہ کارآمد ثابت ہو سکتا ہے اگر آپ صفائی کو انجام دینے کے لیے ایک وقف شدہ لائبریری استعمال کرنے کو ترجیح دیں۔ |
popperConfig | null | چیز | خالی | Bootstrap کی ڈیفالٹ Popper config کو تبدیل کرنے کے لیے، Popper کی ترتیب دیکھیں |
انفرادی ٹول ٹپس کے لیے ڈیٹا کی خصوصیات
انفرادی ٹول ٹِپس کے لیے اختیارات کو متبادل طور پر ڈیٹا انتساب کے استعمال کے ذریعے بیان کیا جا سکتا ہے، جیسا کہ اوپر بیان کیا گیا ہے۔
طریقے
غیر مطابقت پذیر طریقے اور ٹرانزیشن
تمام 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 مثال کا طریقہ کہا جاتا ہے۔ |
show.bs.tooltip | یہ ایونٹ اس وقت برطرف ہو جاتا ہے جب ٹول ٹپ صارف کے لیے مرئی ہو جاتی ہے (CSS ٹرانزیشن مکمل ہونے کا انتظار کرے گا)۔ |
hide.bs.tooltip | اس واقعہ کو فوری طور پر برطرف کر دیا جاتا ہے جب hide مثال کے طریقے کو بلایا جاتا ہے۔ |
hidden.bs.tooltip | جب ٹول ٹپ صارف سے پوشیدہ ہو جائے تو یہ ایونٹ فائر کیا جاتا ہے (CSS ٹرانزیشن مکمل ہونے کا انتظار کرے گا)۔ |
inserted.bs.tooltip | یہ ایونٹ اس ایونٹ کے بعد فائر کیا جاتا ہے show.bs.tooltip جب ٹول ٹپ ٹیمپلیٹ کو DOM میں شامل کیا جاتا ہے۔ |
$('#myTooltip').on('hidden.bs.tooltip', function () {
// do something...
})