Source

உதவிக்குறிப்புகள்

உள்ளூர் தலைப்பு சேமிப்பகத்திற்கான அனிமேஷன்கள் மற்றும் தரவு பண்புக்கூறுகளுக்கு CSS3 ஐப் பயன்படுத்தி CSS மற்றும் JavaScript உடன் தனிப்பயன் பூட்ஸ்டார்ப் டூல்டிப்களைச் சேர்ப்பதற்கான ஆவணங்கள் மற்றும் எடுத்துக்காட்டுகள்.

கண்ணோட்டம்

உதவிக்குறிப்பு செருகுநிரலைப் பயன்படுத்தும் போது தெரிந்து கொள்ள வேண்டியவை:

  • டூல்டிப்கள் 3வது தரப்பு லைப்ரரியான Popper.js ஐ பொசிஷனிங்கிற்குச் சார்ந்துள்ளது. நீங்கள் bootstrap.js க்கு முன் popper.min.js ஐ சேர்க்க வேண்டும் அல்லது டூல்டிப்கள் வேலை செய்ய Popper.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()
})

எடுத்துக்காட்டுகள்

உதவிக்குறிப்புகளைப் பார்க்க கீழே உள்ள இணைப்புகளின் மீது வட்டமிடுங்கள்:

இறுக்கமான பேன்ட் அடுத்த நிலை கெஃபியே நீங்கள் அவற்றைப் பற்றி கேள்விப்பட்டிருக்க வாய்ப்பில்லை. ஃபோட்டோ பூத் தாடி ரா டெனிம் லெட்டர்பிரஸ் சைவ தூதர் பை ஸ்டம்ப்டவுன். ஃபார்ம்-டு-டேபிள் சீடன், 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>

தனிப்பயன் 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பண்புக்கூறு மட்டுமே மற்றும் titleHTML உறுப்பில் நீங்கள் ஒரு உதவிக்குறிப்பை வைத்திருக்க விரும்புகிறீர்கள். டூல்டிப்பின் உருவாக்கப்பட்ட மார்க்அப் மிகவும் எளிமையானது, இருப்பினும் அதற்கு ஒரு நிலை தேவைப்படுகிறது (இயல்பாக, 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="".

பெயர் வகை இயல்புநிலை விளக்கம்
இயங்குபடம் பூலியன் உண்மை உதவிக்குறிப்பில் CSS மங்கல் மாற்றத்தைப் பயன்படுத்தவும்
கொள்கலன் சரம் | உறுப்பு | பொய் பொய்

ஒரு குறிப்பிட்ட உறுப்புடன் உதவிக்குறிப்பைச் சேர்க்கிறது. உதாரணம்: container: 'body'. இந்த விருப்பம் குறிப்பாக பயனுள்ளதாக இருக்கும், இது ஆவணத்தின் ஓட்டத்தில் டூல்டிப்பை தூண்டும் உறுப்புக்கு அருகில் நிலைநிறுத்த அனுமதிக்கிறது - இது சாளரத்தின் மறுஅளவின் போது தூண்டுதல் உறுப்பிலிருந்து டூல்டிப் மிதப்பதைத் தடுக்கும்.
தாமதம் எண் | பொருள் 0

உதவிக்குறிப்பை (மிஎஸ்) காட்டுவது மற்றும் மறைப்பது தாமதம் - கையேடு தூண்டுதல் வகைக்கு பொருந்தாது

எண் வழங்கப்பட்டால், மறை/காட்சி இரண்டிற்கும் தாமதம் பயன்படுத்தப்படும்

பொருளின் அமைப்பு:delay: { "show": 500, "hide": 100 }
html பூலியன் பொய்

உதவிக்குறிப்பில் HTML ஐ அனுமதிக்கவும்.

உண்மை எனில், உதவிக்குறிப்பில் உள்ள HTML குறிச்சொற்கள் உதவிக்குறிப்பில் titleவழங்கப்படும். textதவறு எனில் , DOM இல் உள்ளடக்கத்தைச் செருக jQuery இன் முறை பயன்படுத்தப்படும்.

XSS தாக்குதல்களைப் பற்றி நீங்கள் கவலைப்படுகிறீர்கள் என்றால் உரையைப் பயன்படுத்தவும்.
வேலை வாய்ப்பு சரம் | செயல்பாடு 'மேல்'

உதவிக்குறிப்பை எவ்வாறு நிலைநிறுத்துவது - ஆட்டோ | மேல் | கீழே | விட்டு | சரி.
குறிப்பிடப்பட்டால், அது autoஉதவிக்குறிப்பை மாறும் வகையில் மாற்றியமைக்கும்.

இடத்தைத் தீர்மானிக்க ஒரு செயல்பாடு பயன்படுத்தப்படும்போது, ​​அது டூல்டிப் DOM முனை அதன் முதல் வாதமாகவும், தூண்டுதல் உறுப்பு DOM முனை அதன் இரண்டாவது எனவும் அழைக்கப்படுகிறது. சூழல் உதவிக்குறிப்பு நிகழ்வில் அமைக்கப்பட்டுள்ளது this.
தேர்வாளர் சரம் | பொய் பொய் ஒரு தேர்வி வழங்கப்பட்டால், டூல்டிப் பொருள்கள் குறிப்பிடப்பட்ட இலக்குகளுக்கு ஒதுக்கப்படும். jQuery.onநடைமுறையில், மாறும் வகையில் சேர்க்கப்பட்ட DOM உறுப்புகளுக்கு ( ஆதரவு) உதவிக்குறிப்புகளைப் பயன்படுத்தவும் இது பயன்படுகிறது . இதையும் ஒரு தகவல் உதாரணத்தையும் பார்க்கவும் .
டெம்ப்ளேட் லேசான கயிறு '<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 அதன் இலக்குடன் தொடர்புடைய உதவிக்குறிப்பின் ஆஃப்செட். மேலும் தகவலுக்கு, Popper.js இன் ஆஃப்செட் டாக்ஸைப் பார்க்கவும் .
வீழ்ச்சியடைதல் சரம் | வரிசை 'புரட்டு' ஃபால்பேக்கில் பாப்பர் எந்த நிலையைப் பயன்படுத்துவார் என்பதைக் குறிப்பிட அனுமதிக்கவும். மேலும் தகவலுக்கு, Popper.js இன் நடத்தை ஆவணத்தைப் பார்க்கவும்
எல்லை சரம் | உறுப்பு 'சுருள் பெற்றோர்' டூல்டிப்பின் வழிதல் கட்டுப்பாடு எல்லை. 'viewport', 'window', 'scrollParent', அல்லது HTMLElement குறிப்பு (JavaScript மட்டும்) இன் மதிப்புகளை ஏற்கிறது . மேலும் தகவலுக்கு, 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நிகழ்வு முறை என்று அழைக்கப்படும் போது இந்த நிகழ்வு உடனடியாக சுடுகிறது .
காட்டப்பட்டுள்ளது.பி.எஸ்.உதவிக்குறிப்பு உதவிக்குறிப்பு பயனருக்குத் தெரியும் போது இந்த நிகழ்வு நீக்கப்படும் (CSS மாற்றங்கள் முடிவடையும் வரை காத்திருக்கும்).
hide.bs.tooltip hideநிகழ்வு முறை அழைக்கப்பட்டவுடன் இந்த நிகழ்வு உடனடியாக நீக்கப்படும் .
மறைக்கப்பட்ட.பி.எஸ்.உதவிக்குறிப்பு டூல்டிப் பயனரிடமிருந்து மறைக்கப்பட்டு முடிந்ததும் இந்த நிகழ்வு நீக்கப்படும் (CSS மாற்றங்கள் முடியும் வரை காத்திருக்கும்).
செருகப்பட்டது.bs.tooltip show.bs.tooltipDOM இல் டூல்டிப் டெம்ப்ளேட் சேர்க்கப்படும் போது, ​​நிகழ்வுக்குப் பிறகு இந்த நிகழ்வு நீக்கப்படும் . 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})