പ്രധാന ഉള്ളടക്കത്തിലേക്ക് പോകുക ഡോക്‌സ് നാവിഗേഷനിലേക്ക് പോകുക
in English

ടൂൾടിപ്പുകൾ

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

അവലോകനം

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

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

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

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

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

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

ഉദാഹരണങ്ങൾ

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

ടൂൾടിപ്പുകൾക്കൊപ്പം ചില ഇൻലൈൻ ലിങ്കുകൾ പ്രദർശിപ്പിക്കുന്നതിനുള്ള പ്ലേസ്‌ഹോൾഡർ ടെക്‌സ്‌റ്റ് . ഇത് ഇപ്പോൾ ഫില്ലർ മാത്രമാണ്, കൊലയാളിയില്ല. യഥാർത്ഥ ടെക്‌സ്‌റ്റിന്റെ സാന്നിദ്ധ്യം അനുകരിക്കാൻ മാത്രമായി ഇവിടെ സ്ഥാപിച്ചിട്ടുള്ള ഉള്ളടക്കം . യഥാർത്ഥ ലോക സാഹചര്യങ്ങളിൽ ടൂൾടിപ്പുകൾ ഉപയോഗിക്കുമ്പോൾ എങ്ങനെ കാണപ്പെടും എന്നതിനെക്കുറിച്ച് നിങ്ങൾക്ക് ഒരു ആശയം നൽകുന്നതിന് മാത്രമായി അതെല്ലാം. അതിനാൽ , ലിങ്കുകളിലെ ഈ ടൂൾടിപ്പുകൾ നിങ്ങളുടെ സ്വന്തം സൈറ്റിലോ പ്രോജക്റ്റിലോ ഉപയോഗിച്ചുകഴിഞ്ഞാൽ, പ്രായോഗികമായി എങ്ങനെ പ്രവർത്തിക്കുമെന്ന് നിങ്ങൾ ഇപ്പോൾ കണ്ടുവെന്ന് പ്രതീക്ഷിക്കുന്നു .

നാല് ടൂൾടിപ്പ് ദിശകൾ കാണുന്നതിന് താഴെയുള്ള ബട്ടണുകളിൽ ഹോവർ ചെയ്യുക: മുകളിൽ, വലത്, താഴെ, ഇടത്. RTL-ൽ ബൂട്ട്‌സ്‌ട്രാപ്പ് ഉപയോഗിക്കുമ്പോൾ ദിശകൾ മിറർ ചെയ്യുന്നു.

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
  Tooltip on left
</button>

കൂടാതെ ഇഷ്‌ടാനുസൃത HTML ചേർത്തു:

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

ഒരു SVG ഉപയോഗിച്ച്:

സാസ്

വേരിയബിളുകൾ

$tooltip-font-size:                 $font-size-sm;
$tooltip-max-width:                 200px;
$tooltip-color:                     $white;
$tooltip-bg:                        $black;
$tooltip-border-radius:             $border-radius;
$tooltip-opacity:                   .9;
$tooltip-padding-y:                 $spacer * .25;
$tooltip-padding-x:                 $spacer * .5;
$tooltip-margin:                    0;

$tooltip-arrow-width:               .8rem;
$tooltip-arrow-height:              .4rem;
$tooltip-arrow-color:               $tooltip-bg;

ഉപയോഗം

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

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

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)
ഓവർഫ്ലോ autoആൻഡ്scroll

ഒരു പാരന്റ് കണ്ടെയ്‌നറിൽ ഞങ്ങളുടെ ഉള്ളപ്പോഴോ ഇഷ്ടപ്പെടുമ്പോഴോ ടൂൾടിപ്പ് overflow: autoസ്ഥാനം സ്വയമേവ മാറാൻ ശ്രമിക്കുന്നു , പക്ഷേ യഥാർത്ഥ പ്ലേസ്‌മെന്റിന്റെ സ്ഥാനം നിലനിർത്തുന്നു. ഇത് പരിഹരിക്കുന്നതിന്, ഡിഫോൾട്ട് മൂല്യത്തെ അസാധുവാക്കാൻ ഏതെങ്കിലും HTMLElement-ലേക്ക് ഓപ്‌ഷൻ ( ഓപ്‌ഷൻ ഉപയോഗിക്കുന്ന ഫ്ലിപ്പ് മോഡിഫയറിനായി ) സജ്ജമാക്കുക ,overflow: scroll.table-responsiveboundarypopperConfig'clippingParents'document.body

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
  boundary: document.body // or document.querySelector('#boundary')
})

മാർക്ക്അപ്പ്

ടൂൾടിപ്പിന് ആവശ്യമായ മാർക്ക്അപ്പ് ഒരു dataആട്രിബ്യൂട്ട് മാത്രമാണ്, titleകൂടാതെ HTML ഘടകത്തിൽ നിങ്ങൾക്ക് ഒരു ടൂൾടിപ്പ് ഉണ്ടായിരിക്കണം. ഒരു ടൂൾടിപ്പിന്റെ ജനറേറ്റഡ് മാർക്ക്അപ്പ് വളരെ ലളിതമാണ്, എന്നിരുന്നാലും ഇതിന് ഒരു സ്ഥാനം ആവശ്യമാണ് (സ്ഥിരമായി, topപ്ലഗിൻ സജ്ജീകരിച്ചിരിക്കുന്നു).

കീബോർഡ്, അസിസ്റ്റീവ് ടെക്നോളജി ഉപയോക്താക്കൾക്കായി ടൂൾടിപ്പുകൾ പ്രവർത്തിക്കുന്നു

പരമ്പരാഗതമായി കീബോർഡ് ഫോക്കസ് ചെയ്യാവുന്നതും സംവേദനാത്മകവുമായ (ലിങ്കുകൾ അല്ലെങ്കിൽ ഫോം നിയന്ത്രണങ്ങൾ പോലുള്ളവ) HTML ഘടകങ്ങളിലേക്ക് ടൂൾടിപ്പുകൾ മാത്രമേ നിങ്ങൾ ചേർക്കാവൂ. ആട്രിബ്യൂട്ട് ചേർക്കുന്നതിലൂടെ അനിയന്ത്രിതമായ HTML ഘടകങ്ങൾ (ഉദാഹരണത്തിന് <span>) ഫോക്കസ് ചെയ്യാമെങ്കിലും tabindex="0", ഇത് കീബോർഡ് ഉപയോക്താക്കൾക്ക് സംവേദനാത്മകമല്ലാത്ത ഘടകങ്ങളിൽ ശല്യപ്പെടുത്തുന്നതും ആശയക്കുഴപ്പമുണ്ടാക്കുന്നതുമായ ടാബ് സ്റ്റോപ്പുകൾ ചേർക്കും, കൂടാതെ മിക്ക സഹായ സാങ്കേതിക വിദ്യകളും നിലവിൽ ഈ സാഹചര്യത്തിൽ ടൂൾടിപ്പ് പ്രഖ്യാപിക്കുന്നില്ല. കൂടാതെ, നിങ്ങളുടെ ടൂൾടിപ്പിനുള്ള ട്രിഗറായി മാത്രം ആശ്രയിക്കരുത് hover, കാരണം ഇത് നിങ്ങളുടെ ടൂൾടിപ്പുകൾ കീബോർഡ് ഉപയോക്താക്കൾക്ക് ട്രിഗർ ചെയ്യുന്നത് അസാധ്യമാക്കും.

<!-- HTML to write -->
<a href="#" data-bs-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="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

പ്രവർത്തനരഹിതമാക്കിയ ഘടകങ്ങൾ

ആട്രിബ്യൂട്ട് ഉള്ള ഘടകങ്ങൾ disabledസംവേദനാത്മകമല്ല, അതായത് ഉപയോക്താക്കൾക്ക് ഒരു ടൂൾടിപ്പ് (അല്ലെങ്കിൽ പോപ്പോവർ) ട്രിഗർ ചെയ്യുന്നതിന് അവ ഫോക്കസ് ചെയ്യാനോ ഹോവർ ചെയ്യാനോ ക്ലിക്ക് ചെയ്യാനോ കഴിയില്ല. ഒരു പരിഹാരമെന്ന നിലയിൽ, ഒരു റാപ്പറിൽ നിന്ന് ടൂൾടിപ്പ് പ്രവർത്തനക്ഷമമാക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കും <div>അല്ലെങ്കിൽ <span>, ഉപയോഗിച്ച് കീബോർഡ് ഫോക്കസ് ചെയ്യാവുന്ന രീതിയിൽ നിർമ്മിച്ചതാണ് tabindex="0".

<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

ഓപ്ഷനുകൾ

ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ വഴിയോ JavaScript വഴിയോ ഓപ്ഷനുകൾ കൈമാറാൻ കഴിയും. data-bs-ഡാറ്റ ആട്രിബ്യൂട്ടുകൾക്കായി, എന്നതിലെന്നപോലെ ഓപ്ഷന്റെ പേര് ചേർക്കുക data-bs-animation="". ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ വഴി ഓപ്‌ഷനുകൾ കൈമാറുമ്പോൾ, ഓപ്‌ഷൻ പേരിന്റെ കേസ് തരം ഒട്ടകകേസിൽ നിന്ന് കബാബ്-കേസിലേക്ക് മാറ്റുന്നത് ഉറപ്പാക്കുക. ഉദാഹരണത്തിന്, ഉപയോഗിക്കുന്നതിന് പകരം data-bs-customClass="beautifier"ഉപയോഗിക്കുക data-bs-custom-class="beautifier".

സുരക്ഷാ കാരണങ്ങളാൽ, ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ ഉപയോഗിച്ച് sanitize, sanitizeFn, കൂടാതെ allowListഓപ്ഷനുകൾ നൽകാൻ കഴിയില്ല എന്നത് ശ്രദ്ധിക്കുക.
പേര് ടൈപ്പ് ചെയ്യുക സ്ഥിരസ്ഥിതി വിവരണം
animation ബൂളിയൻ true ടൂൾടിപ്പിലേക്ക് ഒരു CSS ഫേഡ് ട്രാൻസിഷൻ പ്രയോഗിക്കുക
container ചരട് | മൂലകം | തെറ്റായ false

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

delay നമ്പർ | വസ്തു 0

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

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

വസ്തുവിന്റെ ഘടന ഇതാണ്:delay: { "show": 500, "hide": 100 }

html ബൂളിയൻ false

ടൂൾടിപ്പിൽ HTML അനുവദിക്കുക.

ശരിയാണെങ്കിൽ, ടൂൾടിപ്പിലെ HTML ടാഗുകൾ ടൂൾടിപ്പിൽ titleറെൻഡർ ചെയ്യപ്പെടും. തെറ്റാണെങ്കിൽ, innerTextDOM-ൽ ഉള്ളടക്കം ചേർക്കാൻ പ്രോപ്പർട്ടി ഉപയോഗിക്കും.

XSS ആക്രമണങ്ങളെക്കുറിച്ച് നിങ്ങൾക്ക് ആശങ്കയുണ്ടെങ്കിൽ ടെക്സ്റ്റ് ഉപയോഗിക്കുക.

placement ചരട് | പ്രവർത്തനം 'top'

ടൂൾടിപ്പ് എങ്ങനെ സ്ഥാപിക്കാം - ഓട്ടോ | മുകളിൽ | താഴെ | വിട്ടു | ശരിയാണ്.
വ്യക്തമാക്കുമ്പോൾ, അത് autoടൂൾടിപ്പിനെ ചലനാത്മകമായി പുനഃക്രമീകരിക്കും.

പ്ലെയ്‌സ്‌മെന്റ് നിർണ്ണയിക്കാൻ ഒരു ഫംഗ്‌ഷൻ ഉപയോഗിക്കുമ്പോൾ, അതിനെ ടൂൾടിപ്പ് DOM നോഡ് അതിന്റെ ആദ്യ ആർഗ്യുമെന്റും ട്രിഗറിംഗ് എലമെന്റ് DOM നോഡ് അതിന്റെ രണ്ടാമത്തേതുമായി വിളിക്കുന്നു. സന്ദർഭം ടൂൾടിപ്പ് ഉദാഹരണമായി thisസജ്ജീകരിച്ചിരിക്കുന്നു.

selector ചരട് | തെറ്റായ false ഒരു സെലക്ടർ നൽകിയിട്ടുണ്ടെങ്കിൽ, ടൂൾടിപ്പ് ഒബ്ജക്റ്റുകൾ നിർദ്ദിഷ്ട ടാർഗെറ്റുകളിലേക്ക് നിയോഗിക്കും. പ്രായോഗികമായി, ചലനാത്മകമായി ചേർത്ത DOM ഘടകങ്ങളിലേക്ക് ടൂൾടിപ്പുകൾ പ്രയോഗിക്കാനും ഇത് ഉപയോഗിക്കുന്നു ( jQuery.onപിന്തുണ). ഇതും വിജ്ഞാനപ്രദമായ ഒരു ഉദാഹരണവും കാണുക .
template സ്ട്രിംഗ് '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

ടൂൾടിപ്പ് സൃഷ്ടിക്കുമ്പോൾ ഉപയോഗിക്കേണ്ട അടിസ്ഥാന HTML.

ടൂൾടിപ്പ് ന്റെ titleഉള്ളിലേക്ക് കുത്തിവയ്ക്കും .tooltip-inner.

.tooltip-arrowടൂൾടിപ്പിന്റെ അമ്പടയാളമായി മാറും.

ഏറ്റവും പുറത്തെ റാപ്പർ ഘടകത്തിന് .tooltipക്ലാസും role="tooltip".

title ചരട് | മൂലകം | പ്രവർത്തനം ''

titleആട്രിബ്യൂട്ട് ഇല്ലെങ്കിൽ ഡിഫോൾട്ട് ശീർഷക മൂല്യം .

thisഒരു ഫംഗ്‌ഷൻ നൽകിയിട്ടുണ്ടെങ്കിൽ, ടൂൾടിപ്പ് ഘടിപ്പിച്ചിരിക്കുന്ന ഘടകത്തിലേക്ക് അതിന്റെ റഫറൻസ് സെറ്റ് ഉപയോഗിച്ച് അതിനെ വിളിക്കും .

trigger സ്ട്രിംഗ് 'hover focus'

ടൂൾടിപ്പ് എങ്ങനെയാണ് ട്രിഗർ ചെയ്യുന്നത് - ക്ലിക്ക് | ഹോവർ | ഫോക്കസ് | മാനുവൽ. നിങ്ങൾക്ക് ഒന്നിലധികം ട്രിഗറുകൾ കടന്നുപോകാം; ഒരു സ്പേസ് ഉപയോഗിച്ച് അവയെ വേർതിരിക്കുക.

'manual'ടൂൾടിപ്പ് .show(), .hide()കൂടാതെ .toggle()രീതികൾ വഴി പ്രോഗ്രാമാറ്റിക് ആയി പ്രവർത്തനക്ഷമമാക്കുമെന്ന് സൂചിപ്പിക്കുന്നു; ഈ മൂല്യം മറ്റേതെങ്കിലും ട്രിഗറുമായി സംയോജിപ്പിക്കാൻ കഴിയില്ല.

'hover'കീബോർഡ് വഴി പ്രവർത്തനക്ഷമമാക്കാൻ കഴിയാത്ത ടൂൾടിപ്പുകൾക്ക് സ്വന്തം നിലയിൽ കാരണമാകും, കീബോർഡ് ഉപയോക്താക്കൾക്ക് സമാന വിവരങ്ങൾ കൈമാറുന്നതിനുള്ള ഇതര രീതികൾ നിലവിലുണ്ടെങ്കിൽ മാത്രമേ ഉപയോഗിക്കാവൂ.

fallbackPlacements അറേ ['top', 'right', 'bottom', 'left'] അറേയിലെ പ്ലെയ്‌സ്‌മെന്റുകളുടെ ഒരു ലിസ്റ്റ് നൽകിക്കൊണ്ട് ഫാൾബാക്ക് പ്ലേസ്‌മെന്റുകൾ നിർവചിക്കുക (മുൻഗണനയുടെ ക്രമത്തിൽ). കൂടുതൽ വിവരങ്ങൾക്ക് പോപ്പറിന്റെ പെരുമാറ്റ ഡോക്‌സ് കാണുക
boundary ചരട് | ഘടകം 'clippingParents' ടൂൾടിപ്പിന്റെ ഓവർഫ്ലോ കൺസ്ട്രെയിന്റ് ബൗണ്ടറി (പോപ്പറിന്റെ പ്രിവൻ ഓവർഫ്ലോ മോഡിഫയറിന് മാത്രം ബാധകമാണ്). സ്ഥിരസ്ഥിതിയായി 'clippingParents', ഇത് ഒരു HTMLElement റഫറൻസ് (JavaScript വഴി മാത്രം) സ്വീകരിക്കാം. കൂടുതൽ വിവരങ്ങൾക്ക് പോപ്പറിന്റെ ഡിറ്റക്റ്റ്ഓവർഫ്ലോ ഡോക്‌സ് കാണുക .
customClass ചരട് | പ്രവർത്തനം ''

ടൂൾടിപ്പിൽ ക്ലാസുകൾ കാണിക്കുമ്പോൾ അതിലേക്ക് ചേർക്കുക. ടെംപ്ലേറ്റിൽ വ്യക്തമാക്കിയിട്ടുള്ള ഏതെങ്കിലും ക്ലാസുകൾക്ക് പുറമെ ഈ ക്ലാസുകൾ ചേർക്കപ്പെടുമെന്നത് ശ്രദ്ധിക്കുക. ഒന്നിലധികം ക്ലാസുകൾ ചേർക്കാൻ, അവയെ സ്‌പെയ്‌സ് ഉപയോഗിച്ച് വേർതിരിക്കുക: 'class-1 class-2'.

അധിക ക്ലാസ് പേരുകൾ അടങ്ങുന്ന ഒരൊറ്റ സ്ട്രിംഗ് നൽകേണ്ട ഒരു ഫംഗ്‌ഷൻ നിങ്ങൾക്ക് പാസാക്കാനും കഴിയും.

sanitize ബൂളിയൻ true സാനിറ്റൈസേഷൻ പ്രവർത്തനക്ഷമമാക്കുക അല്ലെങ്കിൽ പ്രവർത്തനരഹിതമാക്കുക. ആക്ടിവേറ്റ് ചെയ്താൽ 'template', 'title'ഓപ്ഷനുകൾ അണുവിമുക്തമാക്കും. ഞങ്ങളുടെ JavaScript ഡോക്യുമെന്റേഷനിലെ സാനിറ്റൈസർ വിഭാഗം കാണുക .
allowList വസ്തു സ്ഥിര മൂല്യം അനുവദനീയമായ ആട്രിബ്യൂട്ടുകളും ടാഗുകളും അടങ്ങുന്ന ഒബ്ജക്റ്റ്
sanitizeFn ശൂന്യം | പ്രവർത്തനം null ഇവിടെ നിങ്ങൾക്ക് നിങ്ങളുടെ സ്വന്തം സാനിറ്റൈസ് ഫംഗ്ഷൻ നൽകാം. സാനിറ്റൈസേഷൻ നടത്താൻ ഒരു സമർപ്പിത ലൈബ്രറി ഉപയോഗിക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ ഇത് ഉപയോഗപ്രദമാകും.
offset അറേ | ചരട് | പ്രവർത്തനം [0, 0]

ടൂൾടിപ്പ് അതിന്റെ ലക്ഷ്യവുമായി ബന്ധപ്പെട്ട ഓഫ്സെറ്റ്. കോമയാൽ വേർതിരിച്ച മൂല്യങ്ങളുള്ള ഡാറ്റ ആട്രിബ്യൂട്ടുകളിൽ നിങ്ങൾക്ക് ഒരു സ്ട്രിംഗ് കൈമാറാൻ കഴിയും:data-bs-offset="10,20"

ഓഫ്‌സെറ്റ് നിർണ്ണയിക്കാൻ ഒരു ഫംഗ്‌ഷൻ ഉപയോഗിക്കുമ്പോൾ, അതിന്റെ ആദ്യ ആർഗ്യുമെന്റായി പോപ്പർ പ്ലേസ്‌മെന്റ്, റഫറൻസ്, പോപ്പർ റെക്‌റ്റുകൾ എന്നിവ അടങ്ങിയ ഒബ്‌ജക്റ്റ് ഉപയോഗിച്ച് അതിനെ വിളിക്കുന്നു. ട്രിഗറിംഗ് എലമെന്റ് DOM നോഡ് രണ്ടാമത്തെ ആർഗ്യുമെന്റായി കൈമാറുന്നു. ഫംഗ്ഷൻ രണ്ട് അക്കങ്ങളുള്ള ഒരു അറേ നൽകണം: .[skidding, distance]

കൂടുതൽ വിവരങ്ങൾക്ക് പോപ്പറിന്റെ ഓഫ്‌സെറ്റ് ഡോക്‌സ് കാണുക .

popperConfig ശൂന്യം | വസ്തു | പ്രവർത്തനം null

ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ ഡിഫോൾട്ട് പോപ്പർ കോൺഫിഗറേഷൻ മാറ്റുന്നതിന്, പോപ്പറിന്റെ കോൺഫിഗറേഷൻ കാണുക .

പോപ്പർ കോൺഫിഗറേഷൻ സൃഷ്‌ടിക്കാൻ ഒരു ഫംഗ്‌ഷൻ ഉപയോഗിക്കുമ്പോൾ, ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ ഡിഫോൾട്ട് പോപ്പർ കോൺഫിഗറേഷൻ അടങ്ങുന്ന ഒബ്‌ജക്‌റ്റ് ഉപയോഗിച്ചാണ് അതിനെ വിളിക്കുന്നത്. നിങ്ങളുടെ സ്വന്തം കോൺഫിഗറേഷനുമായി ഡിഫോൾട്ട് ഉപയോഗിക്കാനും ലയിപ്പിക്കാനും ഇത് നിങ്ങളെ സഹായിക്കുന്നു. ഫംഗ്‌ഷൻ പോപ്പറിനായി ഒരു കോൺഫിഗറേഷൻ ഒബ്‌ജക്റ്റ് തിരികെ നൽകണം.

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

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

കൂടെ ഫംഗ്ഷൻ ഉപയോഗിക്കുന്നുpopperConfig

var tooltip = new bootstrap.Tooltip(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

രീതികൾ

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

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

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

കാണിക്കുക

ഒരു മൂലകത്തിന്റെ ടൂൾടിപ്പ് വെളിപ്പെടുത്തുന്നു. ടൂൾടിപ്പ് യഥാർത്ഥത്തിൽ കാണിക്കുന്നതിന് മുമ്പ് (അതായത് shown.bs.tooltipഇവന്റ് സംഭവിക്കുന്നതിന് മുമ്പ്) വിളിക്കുന്നയാളിലേക്ക് മടങ്ങുന്നു. ഇത് ടൂൾടിപ്പിന്റെ "മാനുവൽ" ട്രിഗറിംഗ് ആയി കണക്കാക്കപ്പെടുന്നു. പൂജ്യം നീളമുള്ള ശീർഷകങ്ങളുള്ള ടൂൾടിപ്പുകൾ ഒരിക്കലും പ്രദർശിപ്പിക്കില്ല.

tooltip.show()

മറയ്ക്കുക

ഒരു മൂലകത്തിന്റെ ടൂൾടിപ്പ് മറയ്ക്കുന്നു. ടൂൾടിപ്പ് യഥാർത്ഥത്തിൽ മറയ്ക്കുന്നതിന് മുമ്പ് (അതായത് hidden.bs.tooltipഇവന്റ് സംഭവിക്കുന്നതിന് മുമ്പ്) കോളറിലേക്ക് മടങ്ങുന്നു. ഇത് ടൂൾടിപ്പിന്റെ "മാനുവൽ" ട്രിഗറിംഗ് ആയി കണക്കാക്കപ്പെടുന്നു.

tooltip.hide()

ടോഗിൾ ചെയ്യുക

ഒരു മൂലകത്തിന്റെ ടൂൾടിപ്പ് ടോഗിൾ ചെയ്യുന്നു. ടൂൾടിപ്പ് യഥാർത്ഥത്തിൽ കാണിക്കുകയോ മറയ്ക്കുകയോ ചെയ്യുന്നതിനുമുമ്പ് (അതായത് shown.bs.tooltipഅല്ലെങ്കിൽ hidden.bs.tooltipഇവന്റ് സംഭവിക്കുന്നതിന് മുമ്പ്) വിളിക്കുന്നയാളിലേക്ക് മടങ്ങുന്നു. ഇത് ടൂൾടിപ്പിന്റെ "മാനുവൽ" ട്രിഗറിംഗ് ആയി കണക്കാക്കപ്പെടുന്നു.

tooltip.toggle()

കളയുക

ഒരു മൂലകത്തിന്റെ ടൂൾടിപ്പ് മറയ്ക്കുകയും നശിപ്പിക്കുകയും ചെയ്യുന്നു (DOM ഘടകത്തിൽ സംഭരിച്ച ഡാറ്റ നീക്കംചെയ്യുന്നു). ഡെലിഗേഷൻ ഉപയോഗിക്കുന്ന ടൂൾടിപ്പുകൾ ( ഓപ്ഷൻ ഉപയോഗിച്ച് സൃഷ്ടിച്ചതാണ്) ഡിസെൻഡന്റ് ട്രിഗർselector ഘടകങ്ങളിൽ വ്യക്തിഗതമായി നശിപ്പിക്കാൻ കഴിയില്ല.

tooltip.dispose()

പ്രാപ്തമാക്കുക

ഒരു മൂലകത്തിന്റെ ടൂൾടിപ്പ് കാണിക്കാനുള്ള കഴിവ് നൽകുന്നു. ടൂൾടിപ്പുകൾ ഡിഫോൾട്ടായി പ്രവർത്തനക്ഷമമാക്കിയിരിക്കുന്നു.

tooltip.enable()

പ്രവർത്തനരഹിതമാക്കുക

ഒരു ഘടകത്തിന്റെ ടൂൾടിപ്പ് കാണിക്കാനുള്ള കഴിവ് നീക്കം ചെയ്യുന്നു. ടൂൾടിപ്പ് വീണ്ടും പ്രവർത്തനക്ഷമമാക്കിയാൽ മാത്രമേ അത് കാണിക്കാൻ കഴിയൂ.

tooltip.disable()

toggleEnabled

ഒരു ഘടകത്തിന്റെ ടൂൾടിപ്പ് കാണിക്കാനോ മറയ്ക്കാനോ ഉള്ള കഴിവ് ടോഗിൾ ചെയ്യുന്നു.

tooltip.toggleEnabled()

അപ്ഡേറ്റ് ചെയ്യുക

ഒരു മൂലകത്തിന്റെ ടൂൾടിപ്പിന്റെ സ്ഥാനം അപ്ഡേറ്റ് ചെയ്യുന്നു.

tooltip.update()

getInstance

ഒരു DOM ഘടകവുമായി ബന്ധപ്പെട്ട ടൂൾടിപ്പ് ഇൻസ്‌റ്റൻസ് ലഭിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്ന സ്റ്റാറ്റിക് രീതി

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

getOrCreateInstance

ഒരു DOM ഘടകവുമായി ബന്ധപ്പെട്ട ടൂൾടിപ്പ് ഇൻസ്‌റ്റൻസ് ലഭിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്ന സ്റ്റാറ്റിക് രീതി, അല്ലെങ്കിൽ അത് ആരംഭിച്ചിട്ടില്ലെങ്കിൽ പുതിയൊരെണ്ണം സൃഷ്‌ടിക്കുക

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

സംഭവങ്ങൾ

ഇവന്റ് തരം വിവരണം
show.bs.tooltip showഇൻസ്‌റ്റൻസ് മെത്തേഡ് എന്ന് വിളിക്കുമ്പോൾ ഈ സംഭവം ഉടനടി തീപിടിക്കുന്നു .
shown.bs.tooltip ടൂൾടിപ്പ് ഉപയോക്താവിന് ദൃശ്യമാക്കുമ്പോൾ ഈ ഇവന്റ് പ്രവർത്തനക്ഷമമാകും (CSS സംക്രമണങ്ങൾ പൂർത്തിയാകുന്നതുവരെ കാത്തിരിക്കും).
hide.bs.tooltip hideഇൻസ്‌റ്റൻസ് മെത്തേഡ് വിളിച്ചാൽ ഉടൻ തന്നെ ഈ ഇവന്റ് ഫയർ ചെയ്യപ്പെടും.
hidden.bs.tooltip ടൂൾടിപ്പ് ഉപയോക്താവിൽ നിന്ന് മറയ്ക്കുന്നത് പൂർത്തിയാകുമ്പോൾ ഈ ഇവന്റ് ആരംഭിക്കുന്നു (സിഎസ്എസ് സംക്രമണങ്ങൾ പൂർത്തിയാകുന്നതുവരെ കാത്തിരിക്കും).
inserted.bs.tooltip show.bs.tooltipടൂൾടിപ്പ് ടെംപ്ലേറ്റ് DOM-ൽ ചേർക്കുമ്പോൾ ഇവന്റിന് ശേഷം ഈ ഇവന്റ് പ്രവർത്തനക്ഷമമാകും.
var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)

myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
  // do something...
})

tooltip.hide()