Source

ടൂൾടിപ്പുകൾ

പ്രാദേശിക ശീർഷക സംഭരണത്തിനായി ആനിമേഷനുകൾക്കും ഡാറ്റ ആട്രിബ്യൂട്ടുകൾക്കുമായി CSS3 ഉപയോഗിച്ച് CSS, JavaScript എന്നിവയ്‌ക്കൊപ്പം ഇഷ്‌ടാനുസൃത ബൂട്ട്‌സ്‌ട്രാപ്പ് ടൂൾടിപ്പുകൾ ചേർക്കുന്നതിനുള്ള ഡോക്യുമെന്റേഷനും ഉദാഹരണങ്ങളും.

അവലോകനം

ടൂൾടിപ്പ് പ്ലഗിൻ ഉപയോഗിക്കുമ്പോൾ അറിഞ്ഞിരിക്കേണ്ട കാര്യങ്ങൾ:

  • ടൂൾടിപ്പുകൾ സ്ഥാനനിർണ്ണയത്തിനായി മൂന്നാം കക്ഷി ലൈബ്രറി Popper.js- നെ ആശ്രയിക്കുന്നു . നിങ്ങൾ bootstrap.js-ന് മുമ്പ് popper.min.js ഉൾപ്പെടുത്തണം അല്ലെങ്കിൽ ടൂൾടിപ്പുകൾ പ്രവർത്തിക്കുന്നതിന് Popper.js അടങ്ങിയിരിക്കുന്ന bootstrap.bundle.min.js/ ഉപയോഗിക്കുക!bootstrap.bundle.js
  • ഉറവിടത്തിൽ നിന്നാണ് നിങ്ങൾ ഞങ്ങളുടെ JavaScript നിർമ്മിക്കുന്നതെങ്കിൽ, അത് ആവശ്യമാണ്util.js .
  • പ്രകടന കാരണങ്ങളാൽ ടൂൾടിപ്പുകൾ ഓപ്റ്റ്-ഇൻ ആണ്, അതിനാൽ നിങ്ങൾ അവ സ്വയം ആരംഭിക്കണം .
  • പൂജ്യം നീളമുള്ള ശീർഷകങ്ങളുള്ള ടൂൾടിപ്പുകൾ ഒരിക്കലും പ്രദർശിപ്പിക്കില്ല.
  • container: 'body'കൂടുതൽ സങ്കീർണ്ണമായ ഘടകങ്ങളിൽ (ഞങ്ങളുടെ ഇൻപുട്ട് ഗ്രൂപ്പുകൾ, ബട്ടൺ ഗ്രൂപ്പുകൾ മുതലായവ) റെൻഡറിംഗ് പ്രശ്നങ്ങൾ ഒഴിവാക്കാൻ വ്യക്തമാക്കുക .
  • മറഞ്ഞിരിക്കുന്ന ഘടകങ്ങളിൽ ടൂൾടിപ്പുകൾ ട്രിഗർ ചെയ്യുന്നത് പ്രവർത്തിക്കില്ല.
  • ഒരു റാപ്പർ എലമെന്റിൽ ടൂൾടിപ്പുകൾ .disabledഅല്ലെങ്കിൽ disabledഘടകങ്ങൾ ട്രിഗർ ചെയ്യണം.
  • ഒന്നിലധികം വരികളുള്ള ഹൈപ്പർലിങ്കുകളിൽ നിന്ന് ട്രിഗർ ചെയ്യുമ്പോൾ, ടൂൾടിപ്പുകൾ കേന്ദ്രീകരിക്കും. ഈ സ്വഭാവം ഒഴിവാക്കാൻ white-space: nowrap;നിങ്ങളുടെ s-ൽ ഉപയോഗിക്കുക .<a>
  • DOM-ൽ നിന്ന് അവയുടെ അനുബന്ധ ഘടകങ്ങൾ നീക്കം ചെയ്യുന്നതിനുമുമ്പ് ടൂൾടിപ്പുകൾ മറച്ചിരിക്കണം.
  • ഷാഡോ DOM-നുള്ളിലെ ഒരു ഘടകത്തിന് നന്ദി പറഞ്ഞ് ടൂൾടിപ്പുകൾ പ്രവർത്തനക്ഷമമാക്കാം.

ഈ ഘടകത്തിന്റെ ആനിമേഷൻ പ്രഭാവം prefers-reduced-motionമീഡിയ അന്വേഷണത്തെ ആശ്രയിച്ചിരിക്കുന്നു. ഞങ്ങളുടെ പ്രവേശനക്ഷമത ഡോക്യുമെന്റേഷന്റെ കുറച്ച ചലന വിഭാഗം കാണുക .

അതെല്ലാം കിട്ടിയോ? കൊള്ളാം, ചില ഉദാഹരണങ്ങൾ ഉപയോഗിച്ച് അവ എങ്ങനെ പ്രവർത്തിക്കുന്നുവെന്ന് നോക്കാം.

ഉദാഹരണം: എല്ലായിടത്തും ടൂൾടിപ്പുകൾ പ്രവർത്തനക്ഷമമാക്കുക

ഒരു പേജിലെ എല്ലാ ടൂൾടിപ്പുകളും സമാരംഭിക്കുന്നതിനുള്ള ഒരു മാർഗ്ഗം അവയുടെ data-toggleആട്രിബ്യൂട്ട് അനുസരിച്ച് തിരഞ്ഞെടുക്കുന്നതാണ്:

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

ഉദാഹരണങ്ങൾ

ടൂൾടിപ്പുകൾ കാണുന്നതിന് താഴെയുള്ള ലിങ്കുകളിൽ ഹോവർ ചെയ്യുക:

ഇറുകിയ പാന്റ്‌സ് അടുത്ത ലെവൽ keffiyeh നിങ്ങൾ അവയെക്കുറിച്ച് കേട്ടിരിക്കില്ല. ഫോട്ടോ ബൂത്ത് താടി റോ ഡെനിം ലെറ്റർപ്രസ്സ് വെഗൻ മെസഞ്ചർ ബാഗ് സ്റ്റംപ്ടൗൺ. ഫാം-ടു-ടേബിൾ സെയ്റ്റൻ, മക്‌സ്വീനിയുടെ ഫിക്‌സി സുസ്ഥിര ക്വിനോവ 8-ബിറ്റ് അമേരിക്കൻ വസ്ത്രങ്ങൾക്ക് ടെറി റിച്ചാർഡ്‌സൺ വിനൈൽ ചേംബ്രേ ഉണ്ട് . താടി സ്റ്റംപ്ടൗൺ, കാർഡിഗൻസ് ബാൻ മൈ ലോമോ ഇടിമിന്നൽ. ടോഫു ബയോഡീസൽ വില്യംസ്ബർഗ് മാർഫ, ഫോർ ലോക്കോ മക്‌സ്വീനിയുടെ ക്ലീൻസ് വെഗൻ ചേംബ്രേ. ഒരു ശരിക്കും വിരോധാഭാസമായ ആർട്ടിസൻ എന്തായാലും കീറ്റാർ , സീൻസ്റ്റർ ഫാം-ടു-ടേബിൾ ബാങ്ക്സി ഓസ്റ്റിൻ ട്വിറ്റർ ഹാൻഡിൽ ഫ്രീഗാൻ ക്രെഡ് റോ ഡെനിം സിംഗിൾ ഒറിജിൻ കോഫി വൈറൽ.

നാല് ടൂൾടിപ്പ് ദിശകൾ കാണുന്നതിന് ചുവടെയുള്ള ബട്ടണുകളിൽ ഹോവർ ചെയ്യുക: മുകളിൽ, വലത്, താഴെ, ഇടത്.

<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>

ഉപയോഗം

ടൂൾടിപ്പ് പ്ലഗിൻ ആവശ്യാനുസരണം ഉള്ളടക്കവും മാർക്ക്അപ്പും സൃഷ്ടിക്കുന്നു, ഡിഫോൾട്ടായി ടൂൾടിപ്പുകൾ അവയുടെ ട്രിഗർ ഘടകത്തിന് ശേഷം സ്ഥാപിക്കുന്നു.

JavaScript വഴി ടൂൾടിപ്പ് ട്രിഗർ ചെയ്യുക:

$('#example').tooltip(options)
ഓവർഫ്ലോ autoആൻഡ്scroll

ഒരു പാരന്റ് കണ്ടെയ്‌നറിൽ ഞങ്ങളുടെ ഉള്ളപ്പോഴോ ഇഷ്ടപ്പെടുമ്പോഴോ ടൂൾടിപ്പ് സ്ഥാനം സ്വയമേവ മാറാൻ ശ്രമിക്കുന്നു overflow: auto, പക്ഷേ യഥാർത്ഥ പ്ലേസ്‌മെന്റിന്റെ സ്ഥാനം നിലനിർത്തുന്നു. പരിഹരിക്കുന്നതിന്, ഡിഫോൾട്ട് മൂല്യം അല്ലാതെ മറ്റൊന്നിലേക്ക് ഓപ്‌ഷൻ സജ്ജമാക്കുക ,overflow: scroll.table-responsiveboundary'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>

ഓപ്ഷനുകൾ

ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ അല്ലെങ്കിൽ JavaScript വഴി ഓപ്ഷനുകൾ കൈമാറാൻ കഴിയും. ഡാറ്റ ആട്രിബ്യൂട്ടുകൾക്കായി, എന്നതിലേക്ക് ഓപ്ഷന്റെ പേര് ചേർക്കുക data-.data-animation=""

പേര് ടൈപ്പ് ചെയ്യുക സ്ഥിരസ്ഥിതി വിവരണം
ആനിമേഷൻ ബൂളിയൻ സത്യം ടൂൾടിപ്പിലേക്ക് ഒരു CSS ഫേഡ് ട്രാൻസിഷൻ പ്രയോഗിക്കുക
കണ്ടെയ്നർ ചരട് | മൂലകം | തെറ്റായ തെറ്റായ

ഒരു നിർദ്ദിഷ്ട ഘടകത്തിലേക്ക് ടൂൾടിപ്പ് കൂട്ടിച്ചേർക്കുന്നു. ഉദാഹരണം: container: 'body'. ട്രിഗറിംഗ് എലമെന്റിന് സമീപം ഡോക്യുമെന്റിന്റെ ഫ്ലോയിൽ ടൂൾടിപ്പ് സ്ഥാപിക്കാൻ ഇത് നിങ്ങളെ അനുവദിക്കുന്നതിനാൽ ഈ ഓപ്ഷൻ പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാണ് - ഇത് വിൻഡോ വലുപ്പം മാറ്റുമ്പോൾ ട്രിഗറിംഗ് എലമെന്റിൽ നിന്ന് ടൂൾടിപ്പ് ഒഴുകുന്നത് തടയും.
കാലതാമസം നമ്പർ | വസ്തു 0

ടൂൾടിപ്പ് (എംഎസ്) കാണിക്കുന്നതും മറയ്ക്കുന്നതും വൈകുക - മാനുവൽ ട്രിഗർ തരത്തിന് ബാധകമല്ല

ഒരു നമ്പർ നൽകിയിട്ടുണ്ടെങ്കിൽ, മറയ്ക്കുക/കാണിക്കുക എന്നിവയ്‌ക്ക് കാലതാമസം ബാധകമാകും

വസ്തുവിന്റെ ഘടന ഇതാണ്: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 ടൂൾടിപ്പ് അതിന്റെ ലക്ഷ്യവുമായി ബന്ധപ്പെട്ട ഓഫ്സെറ്റ്. കൂടുതൽ വിവരങ്ങൾക്ക് Popper.js-ന്റെ ഓഫ്‌സെറ്റ് ഡോക്‌സ് കാണുക .
ഫാൾബാക്ക് പ്ലേസ്മെന്റ് ചരട് | അറേ 'ഫ്ലിപ്പ്' ഫാൾബാക്കിൽ പോപ്പർ ഏത് സ്ഥാനമാണ് ഉപയോഗിക്കേണ്ടതെന്ന് വ്യക്തമാക്കാൻ അനുവദിക്കുക. കൂടുതൽ വിവരങ്ങൾക്ക് Popper.js-ന്റെ പെരുമാറ്റ ഡോക്‌സ് കാണുക
അതിർത്തി ചരട് | ഘടകം 'സ്ക്രോൾ പേരന്റ്' ടൂൾടിപ്പിന്റെ ഓവർഫ്ലോ കൺസ്ട്രെയിന്റ് ബൗണ്ടറി. 'viewport', 'window', 'scrollParent', അല്ലെങ്കിൽ ഒരു HTMLElement റഫറൻസ് (JavaScript മാത്രം) മൂല്യങ്ങൾ സ്വീകരിക്കുന്നു . കൂടുതൽ വിവരങ്ങൾക്ക്, Popper.js-ന്റെ പ്രിവൻറോ ഓവർഫ്ലോ ഡോക്‌സ് കാണുക .

വ്യക്തിഗത ടൂൾടിപ്പുകൾക്കുള്ള ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ

മുകളിൽ വിശദീകരിച്ചതുപോലെ, വ്യക്തിഗത ടൂൾടിപ്പുകൾക്കുള്ള ഓപ്ഷനുകൾ ഡാറ്റ ആട്രിബ്യൂട്ടുകളുടെ ഉപയോഗത്തിലൂടെ പകരമായി വ്യക്തമാക്കാം.

രീതികൾ

അസിൻക്രണസ് രീതികളും പരിവർത്തനങ്ങളും

എല്ലാ API രീതികളും അസമന്വിതവും ഒരു പരിവർത്തനം ആരംഭിക്കുന്നതുമാണ് . പരിവർത്തനം ആരംഭിച്ചയുടൻ അവർ വിളിക്കുന്ന ആളിലേക്ക് മടങ്ങുന്നു, പക്ഷേ അത് അവസാനിക്കുന്നതിന് മുമ്പ് . കൂടാതെ, ഒരു സംക്രമണ ഘടകത്തിലെ ഒരു മെത്തേഡ് കോൾ അവഗണിക്കപ്പെടും .

കൂടുതൽ വിവരങ്ങൾക്ക് ഞങ്ങളുടെ JavaScript ഡോക്യുമെന്റേഷൻ കാണുക .

$().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 ടൂൾടിപ്പ് ഉപയോക്താവിന് ദൃശ്യമാക്കുമ്പോൾ ഈ ഇവന്റ് പ്രവർത്തനക്ഷമമാകും (CSS സംക്രമണങ്ങൾ പൂർത്തിയാകുന്നതുവരെ കാത്തിരിക്കും).
hide.bs.tooltip hideഇൻസ്‌റ്റൻസ് മെത്തേഡ് വിളിച്ചാൽ ഉടൻ തന്നെ ഈ ഇവന്റ് ഫയർ ചെയ്യപ്പെടും.
മറഞ്ഞിരിക്കുന്നു.bs.ടൂൾടിപ്പ് ടൂൾടിപ്പ് ഉപയോക്താവിൽ നിന്ന് മറയ്ക്കുന്നത് പൂർത്തിയാകുമ്പോൾ ഈ ഇവന്റ് ആരംഭിക്കുന്നു (സിഎസ്എസ് സംക്രമണങ്ങൾ പൂർത്തിയാകുന്നതുവരെ കാത്തിരിക്കും).
inserted.bs.tooltip show.bs.tooltipടൂൾടിപ്പ് ടെംപ്ലേറ്റ് DOM-ൽ ചേർക്കുമ്പോൾ ഇവന്റിന് ശേഷം ഈ ഇവന്റ് പ്രവർത്തനക്ഷമമാകും. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})