ടൂൾടിപ്പുകൾ

അവലോകനം

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

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

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

ഉദാഹരണങ്ങൾ

ടൂൾടിപ്പുകൾ പ്രവർത്തനക്ഷമമാക്കുക

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

const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

ലിങ്കുകളിലെ ടൂൾടിപ്പുകൾ

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

<p class="muted">Placeholder text to demonstrate some <a href="#" data-bs-toggle="tooltip" data-bs-title="Default tooltip">inline links</a> with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of <a href="#" data-bs-toggle="tooltip" data-bs-title="Another tooltip">real text</a>. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how <a href="#" data-bs-toggle="tooltip" data-bs-title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-bs-toggle="tooltip" data-bs-title="The last tip!">your own</a> site or project.
</p>

ഇഷ്‌ടാനുസൃത ടൂൾടിപ്പുകൾ

CSS വേരിയബിളുകൾ ഉപയോഗിച്ച് നിങ്ങൾക്ക് ടൂൾടിപ്പുകളുടെ രൂപം ഇഷ്ടാനുസൃതമാക്കാൻ കഴിയും . data-bs-custom-class="custom-tooltip"ഞങ്ങളുടെ ഇഷ്‌ടാനുസൃത രൂപം സ്‌കോപ്പ് ചെയ്യുന്നതിനായി ഞങ്ങൾ ഒരു ഇഷ്‌ടാനുസൃത ക്ലാസ് സജ്ജീകരിക്കുകയും ഒരു പ്രാദേശിക CSS വേരിയബിളിനെ അസാധുവാക്കാൻ അത് ഉപയോഗിക്കുകയും ചെയ്യുന്നു.

.custom-tooltip {
  --bs-tooltip-bg: var(--bs-primary);
}

<button type="button" class="btn btn-secondary"
        data-bs-toggle="tooltip" data-bs-placement="top"
        data-bs-custom-class="custom-tooltip"
        data-bs-title="This top tooltip is themed via CSS variables.">
  Custom tooltip
</button>

ദിശകൾ

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

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

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

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

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

സി.എസ്.എസ്

വേരിയബിളുകൾ

ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ വികസിച്ചുകൊണ്ടിരിക്കുന്ന CSS വേരിയബിൾ സമീപനത്തിന്റെ ഭാഗമായി, .tooltipമെച്ചപ്പെടുത്തിയ തത്സമയ കസ്റ്റമൈസേഷനായി ടൂൾടിപ്പുകൾ ഇപ്പോൾ ലോക്കൽ CSS വേരിയബിളുകൾ ഉപയോഗിക്കുന്നു. CSS വേരിയബിളുകൾക്കുള്ള മൂല്യങ്ങൾ Sass വഴി സജ്ജീകരിച്ചിരിക്കുന്നു, അതിനാൽ Sass ഇഷ്‌ടാനുസൃതമാക്കൽ ഇപ്പോഴും പിന്തുണയ്ക്കുന്നു.

  --#{$prefix}tooltip-zindex: #{$zindex-tooltip};
  --#{$prefix}tooltip-max-width: #{$tooltip-max-width};
  --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
  --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
  --#{$prefix}tooltip-margin: #{$tooltip-margin};
  @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
  --#{$prefix}tooltip-color: #{$tooltip-color};
  --#{$prefix}tooltip-bg: #{$tooltip-bg};
  --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
  --#{$prefix}tooltip-opacity: #{$tooltip-opacity};
  --#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
  --#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
  

സാസ് വേരിയബിളുകൾ

$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:                    null; // TODO: remove this in v6

$tooltip-arrow-width:               .8rem;
$tooltip-arrow-height:              .4rem;
// fusv-disable
$tooltip-arrow-color:               null; // Deprecated in Bootstrap 5.2.0 for CSS variables
// fusv-enable

ഉപയോഗം

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

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

const exampleEl = document.getElementById('example')
const tooltip = new bootstrap.Tooltip(exampleEl, options)

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

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

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

<!-- HTML to write -->
<a href="#" data-bs-toggle="tooltip" data-bs-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" data-bs-title="Disabled tooltip">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

ഓപ്ഷനുകൾ

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

ബൂട്ട്‌സ്‌ട്രാപ്പ് 5.2.0 പോലെ, എല്ലാ ഘടകങ്ങളും ഒരു പരീക്ഷണാത്മക റിസർവ് ചെയ്‌ത ഡാറ്റ ആട്രിബ്യൂട്ടിനെ പിന്തുണയ്‌ക്കുന്നു data-bs-config, അത് ഒരു JSON സ്ട്രിംഗായി ലളിതമായ ഘടക കോൺഫിഗറേഷനെ ഉൾക്കൊള്ളാൻ കഴിയും. ഒരു മൂലകവും ആട്രിബ്യൂട്ടുകളും ഉള്ളപ്പോൾ data-bs-config='{"delay":0, "title":123}', data-bs-title="456"അന്തിമ titleമൂല്യം ആയിരിക്കും 456കൂടാതെ പ്രത്യേക ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ ന് നൽകിയിരിക്കുന്ന മൂല്യങ്ങളെ അസാധുവാക്കും data-bs-config. കൂടാതെ, നിലവിലുള്ള ഡാറ്റ ആട്രിബ്യൂട്ടുകൾക്ക് പോലെയുള്ള JSON മൂല്യങ്ങൾ നിലനിർത്താൻ കഴിയും data-bs-delay='{"show":0,"hide":150}'.

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

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

രീതികൾ

const tooltip = bootstrap.Tooltip.getInstance('#example') // Returns a Bootstrap tooltip instance

// setContent example
tooltip.setContent({ '.tooltip-inner': 'another title' })

ഇവന്റുകൾ

const myTooltipEl = document.getElementById('myTooltip')
const tooltip = bootstrap.Tooltip.getOrCreateInstance(myTooltipEl)

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

tooltip.hide()