உதவிக்குறிப்புகள்
உள்ளூர் தலைப்பு சேமிப்பகத்திற்கான அனிமேஷன்கள் மற்றும் தரவு பண்புக்கூறுகளுக்கு CSS3 ஐப் பயன்படுத்தி CSS மற்றும் JavaScript உடன் தனிப்பயன் பூட்ஸ்டார்ப் டூல்டிப்களைச் சேர்ப்பதற்கான ஆவணங்கள் மற்றும் எடுத்துக்காட்டுகள்.
கண்ணோட்டம்
உதவிக்குறிப்பு செருகுநிரலைப் பயன்படுத்தும் போது தெரிந்து கொள்ள வேண்டியவை:
- டூல்டிப்கள் 3வது தரப்பு லைப்ரரி பாப்பரைப் பொருத்திப் பார்க்கிறது . நீங்கள் bootstrap.js க்கு முன் popper.min.js ஐ சேர்க்க வேண்டும் அல்லது டூல்டிப்கள் வேலை செய்ய, பாப்பர் கொண்டிருக்கும்
bootstrap.bundle.min.js
/ பயன்படுத்தவும்!bootstrap.bundle.js
- நீங்கள் எங்கள் ஜாவாஸ்கிரிப்டை மூலத்திலிருந்து உருவாக்கினால், அதற்கு
util.js
. - செயல்திறன் காரணங்களுக்காக உதவிக்குறிப்புகள் தேர்வு செய்யப்படுகின்றன, எனவே அவற்றை நீங்களே துவக்க வேண்டும் .
- பூஜ்ஜிய நீள தலைப்புகள் கொண்ட உதவிக்குறிப்புகள் ஒருபோதும் காட்டப்படாது.
- மிகவும் சிக்கலான கூறுகளில் (எங்கள் உள்ளீட்டு குழுக்கள், பொத்தான் குழுக்கள் போன்றவை) ரெண்டரிங்
container: 'body'
சிக்கல்களைத் தவிர்க்க குறிப்பிடவும். - மறைக்கப்பட்ட உறுப்புகளில் உதவிக்குறிப்புகளைத் தூண்டுவது வேலை செய்யாது.
- ரேப்பர் உறுப்பில் உதவிக்குறிப்புகள்
.disabled
அல்லதுdisabled
உறுப்புகள் தூண்டப்பட வேண்டும். - பல வரிகளை உள்ளடக்கிய ஹைப்பர்லிங்க்களில் இருந்து தூண்டப்படும் போது, டூல்டிப்கள் மையப்படுத்தப்படும். இந்த நடத்தையைத் தவிர்க்க
white-space: nowrap;
உங்கள் மீது பயன்படுத்தவும் .<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>
கள் போன்றவை) கவனம் செலுத்த முடியும் என்றாலும், இது விசைப்பலகை பயனர்களுக்கு ஊடாடாத கூறுகளில் 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 மங்கல் மாற்றத்தைப் பயன்படுத்தவும் |
கொள்கலன் | சரம் | உறுப்பு | பொய் | பொய் | ஒரு குறிப்பிட்ட உறுப்புடன் உதவிக்குறிப்பைச் சேர்க்கிறது. உதாரணம்: |
தாமதம் | எண் | பொருள் | 0 | உதவிக்குறிப்பை (மிஎஸ்) காட்டுவது மற்றும் மறைப்பது தாமதம் - கையேடு தூண்டுதல் வகைக்கு பொருந்தாது எண் வழங்கப்பட்டால், மறை/காட்சி இரண்டிற்கும் தாமதம் பயன்படுத்தப்படும் பொருளின் அமைப்பு: |
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 முனை இரண்டாவது வாதமாக அனுப்பப்பட்டது. மேலும் தகவலுக்கு, பாப்பரின் ஆஃப்செட் டாக்ஸைப் பார்க்கவும் . |
வீழ்ச்சியடைதல் | சரம் | வரிசை | 'புரட்டு' | ஃபால்பேக்கில் பாப்பர் எந்த நிலையைப் பயன்படுத்துவார் என்பதைக் குறிப்பிட அனுமதிக்கவும். மேலும் தகவலுக்கு, பாப்பரின் நடத்தை ஆவணங்களைப் பார்க்கவும் |
விருப்ப வகுப்பு | சரம் | செயல்பாடு | '' | உதவிக்குறிப்பு காட்டப்படும்போது வகுப்புகளைச் சேர்க்கவும். டெம்ப்ளேட்டில் குறிப்பிடப்பட்டுள்ள எந்த வகுப்புகளுக்கும் கூடுதலாக இந்த வகுப்புகள் சேர்க்கப்படும் என்பதை நினைவில் கொள்ளவும். பல வகுப்புகளைச் சேர்க்க, அவற்றை இடைவெளிகளுடன் பிரிக்கவும்: கூடுதல் வகுப்புப் பெயர்களைக் கொண்ட ஒற்றை சரத்தை வழங்கும் செயல்பாட்டையும் நீங்கள் அனுப்பலாம். |
எல்லை | சரம் | உறுப்பு | 'சுருள் பெற்றோர்' | டூல்டிப்பின் வழிதல் கட்டுப்பாடு எல்லை. 'viewport' , 'window' , 'scrollParent' , அல்லது HTMLElement குறிப்பு (JavaScript மட்டும்) இன் மதிப்புகளை ஏற்கிறது . மேலும் தகவலுக்கு, Popper's preventOverflow ஆவணத்தைப் பார்க்கவும் . |
சுத்தப்படுத்து | பூலியன் | உண்மை | சுத்தப்படுத்துதலை இயக்கவும் அல்லது முடக்கவும். செயல்படுத்தப்பட்டால் 'template' மற்றும் 'title' விருப்பங்கள் சுத்தப்படுத்தப்படும். எங்கள் ஜாவாஸ்கிரிப்ட் ஆவணத்தில் சானிடைசர் பகுதியைப் பார்க்கவும் . |
வெள்ளைப்பட்டியல் | பொருள் | இயல்புநிலை மதிப்பு | அனுமதிக்கப்பட்ட பண்புக்கூறுகள் மற்றும் குறிச்சொற்களைக் கொண்ட பொருள் |
சுத்திகரிப்பு | பூஜ்ய | செயல்பாடு | ஏதுமில்லை | இங்கே நீங்கள் உங்கள் சொந்த சுத்திகரிப்பு செயல்பாட்டை வழங்கலாம். சுத்திகரிப்பு செய்ய பிரத்யேக நூலகத்தைப் பயன்படுத்த விரும்பினால் இது பயனுள்ளதாக இருக்கும். |
popperConfig | பூஜ்ய | பொருள் | ஏதுமில்லை | பூட்ஸ்டார்ப்பின் இயல்புநிலை பாப்பர் கட்டமைப்பை மாற்ற, பாப்பரின் உள்ளமைவைப் பார்க்கவும் |
தனிப்பட்ட உதவிக்குறிப்புகளுக்கான தரவு பண்புக்கூறுகள்
மேலே விளக்கப்பட்டுள்ளபடி, தனிப்பட்ட டூல்டிப்புகளுக்கான விருப்பங்களை தரவு பண்புக்கூறுகளின் மூலம் மாற்றாகக் குறிப்பிடலாம்.
முறைகள்
ஒத்திசைவற்ற முறைகள் மற்றும் மாற்றங்கள்
அனைத்து 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 நிகழ்வு முறை என்று அழைக்கப்படும் போது இந்த நிகழ்வு உடனடியாக சுடுகிறது . |
காட்டப்பட்டுள்ளது.பி.எஸ்.உதவிக்குறிப்பு | உதவிக்குறிப்பு பயனருக்குத் தெரியும் போது இந்த நிகழ்வு நீக்கப்படும் (CSS மாற்றங்கள் முடிவடையும் வரை காத்திருக்கும்). |
hide.bs.tooltip | hide நிகழ்வு முறை அழைக்கப்பட்டவுடன் இந்த நிகழ்வு உடனடியாக நீக்கப்படும் . |
மறைக்கப்பட்ட.பி.எஸ்.உதவிக்குறிப்பு | டூல்டிப் பயனரிடமிருந்து மறைக்கப்பட்டு முடிந்ததும் இந்த நிகழ்வு நீக்கப்படும் (CSS மாற்றங்கள் முடியும் வரை காத்திருக்கும்). |
செருகப்பட்டது.bs.tooltip | show.bs.tooltip DOM இல் டூல்டிப் டெம்ப்ளேட் சேர்க்கப்படும் போது, நிகழ்வுக்குப் பிறகு இந்த நிகழ்வு நீக்கப்படும் . |
$('#myTooltip').on('hidden.bs.tooltip', function () {
// do something...
})