මෙවලම් ඉඟි

දළ විශ්ලේෂණය

මෙවලම් ඉඟි ප්ලගිනය භාවිතා කරන විට දැනගත යුතු දේ:

• මෙවලම් ඉඟි ස්ථානගත කිරීම සඳහා තෙවන පාර්ශවීය පුස්තකාලය Popper මත රඳා පවතී . ඔබ පෙර popper.min.jsbootstrap.js ඇතුළත් කළ යුතුය , නැතහොත් bootstrap.bundle.min.jsPopper අඩංගු එකක් භාවිතා කරන්න.
• කාර්ය සාධන හේතූන් මත මෙවලම් ඉඟි තෝරාගෙන ඇත, එබැවින් ඔබ ඒවා ඔබම ආරම්භ කළ යුතුය .
• ශුන්‍ය-දිග මාතෘකා සහිත මෙවලම් ඉඟි කිසිවිටෙක නොපෙන්වයි.
• 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 හි Bootstrap භාවිතා කරන විට දිශාවන් පිළිබිඹු වේ.

<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

විචල්යයන්

Bootstrap හි විකාශනය වන 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};
  

Sass විචල්යයන්

$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')
})

සලකුණු කිරීම

මෙවලම් ඉඟියක් සඳහා අවශ්‍ය සලකුණු කිරීම විශේෂණයක් පමණක් වන අතර dataHTML titleමූලද්‍රව්‍ය මත ඔබට මෙවලම් ඉඟියක් තිබිය යුතුය. මෙවලම් ඉඟියක උත්පාදනය කරන ලද සලකුණු කිරීම තරමක් සරල ය, නමුත් එයට ස්ථානයක් අවශ්‍ය වේ (පෙරනිමියෙන්, 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අන්තර්ක්‍රියාකාරී නොවේ, එනම් පරිශීලකයින්ට මෙවලම් ඉඟියක් (හෝ popover) ක්‍රියාරම්භ කිරීමට ඒවා නාභිගත කිරීමට, සැරිසැරීමට හෝ ක්ලික් කිරීමට නොහැක. විසඳුමක් ලෙස, ඔබට මෙවලම් ඉඟිය දවටනයකින් ක්‍රියාරම්භ කිරීමට අවශ්‍ය වනු ඇත <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>

විකල්ප

දත්ත උපලක්ෂණ හෝ ජාවාස්ක්‍රිප්ට් හරහා විකල්ප ලබා දිය හැකි බැවින්, ඔබට විකල්ප නාමයක් data-bs-, ලෙසට එකතු කළ හැක data-bs-animation="{value}". දත්ත ගුණාංග හරහා විකල්ප සම්මත කිරීමේදී විකල්ප නාමයේ කේස් වර්ගය “ කැමල්කේස් ” සිට “ කෙබාබ්-කේස් ” ලෙස වෙනස් කිරීමට වග බලා ගන්න. උදාහරණයක් ලෙස, data-bs-custom-class="beautifier"වෙනුවට භාවිතා කරන්න data-bs-customClass="beautifier".

Bootstrap 5.2.0 වන විට, සියලුම සංරචක JSON තන්තුවක් ලෙස සරල සංරචක වින්‍යාසගත කළ හැකි පර්යේෂණාත්මක වෙන් කළ දත්ත ගුණාංගයකට සහාය දක්වයි. data-bs-configමූලද්‍රව්‍යයක් සතුව 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()