ടൂൾടിപ്പുകൾ

അവലോകനം

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

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

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

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

ഒരു പേജിലെ എല്ലാ ടൂൾടിപ്പുകളും സമാരംഭിക്കുന്നതിനുള്ള ഒരു മാർഗ്ഗം അവയുടെ 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)

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

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

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

<!-- 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".

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

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

രീതികൾ

കാണിക്കുക

ഒരു മൂലകത്തിന്റെ ടൂൾടിപ്പ് വെളിപ്പെടുത്തുന്നു. ടൂൾടിപ്പ് യഥാർത്ഥത്തിൽ കാണിക്കുന്നതിന് മുമ്പ് (അതായത് 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

സംഭവങ്ങൾ

var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)

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

tooltip.hide()