ප්‍රධාන අන්තර්ගතය වෙත යන්න ලේඛන සංචාලනය වෙත යන්න
in English

මෙවලම් ඉඟි

සජීවිකරණ සඳහා CSS3 භාවිතා කරමින් CSS සහ JavaScript සමඟ අභිරුචි බූට්ස්ට්‍රැප් මෙවලම් එකතු කිරීම සඳහා ප්‍රලේඛනය සහ උදාහරණ සහ දේශීය මාතෘකා ආචයනය සඳහා දත්ත-bs-ගුණාංග.

මෙම පිටුවේ

දළ විශ්ලේෂණය

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

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

<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හෝ overflow: scrollඅපගේ කැමති විට ස්වයංක්‍රීයව වෙනස් වීමට උත්සාහ කරයි .table-responsive, නමුත් මුල් ස්ථානගත කිරීමේ ස්ථානගත කිරීම තවමත් තබා ගනී. මෙය විසඳීමට, පෙරනිමි අගය අභිබවා යාමට boundaryවිකල්පය (විකල්පය භාවිතා කරන flip modifier සඳහා ) ඕනෑම HTMLElement වෙත සකසන්න , වැනි :popperConfig'clippingParents'document.body

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

සලකුණු කිරීම

මෙවලම් ඉඟියක් සඳහා අවශ්‍ය සලකුණු කිරීම විශේෂණයක් පමණක් වන අතර dataHTML titleමූලද්‍රව්‍ය මත ඔබට මෙවලම් ඉඟියක් තිබිය යුතුය. මෙවලම් ඉඟියක උත්පාදනය කරන ලද සලකුණු කිරීම තරමක් සරල ය, නමුත් එයට ස්ථානයක් අවශ්‍ය වේ (පෙරනිමියෙන්, topප්ලගිනය මගින් සකසා ඇත).

යතුරුපුවරු සහ සහායක තාක්‍ෂණ භාවිතා කරන්නන් සඳහා මෙවලම් ඉඟි වැඩ කිරීම

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

මෙවලම් ඉඟිය (ms) පෙන්වීම සහ සැඟවීම ප්‍රමාද කිරීම - අතින් ප්‍රේරක වර්ගයට අදාළ නොවේ

අංකයක් සපයා ඇත්නම්, සැඟවීම/පෙන්වීම යන දෙකටම ප්‍රමාදය යෙදේ

වස්තු ව්යුහය යනු:delay: { "show": 500, "hide": 100 }
html බූලියන් false

මෙවලම් ඉඟියේ HTML වලට ඉඩ දෙන්න.

සත්‍ය නම්, මෙවලම් ඉඟියේ ඇති HTML ටැග් මෙවලම් ඉඟිය තුළ titleවිදැහුම් කරනු ඇත. අසත්‍ය නම්, innerTextDOM වෙත අන්තර්ගතය ඇතුළු කිරීමට දේපල භාවිතා කරනු ඇත.

ඔබ XSS ප්‍රහාර ගැන කනස්සල්ලෙන් සිටින්නේ නම් පෙළ භාවිතා කරන්න.
placement තන්තුව | කාර්යය 'top'

මෙවලම් ඉඟිය ස්ථානගත කරන්නේ කෙසේද - ස්වයංක්‍රීය | ඉහළ | පහළ | ඉතිරි | හරි.
නියම කර ඇති විට auto, එය මෙවලම් ඉඟිය ගතිකව නැවත දිශානතියට පත් කරයි.

ස්ථානගත කිරීම තීරණය කිරීම සඳහා ශ්‍රිතයක් භාවිතා කරන විට, එය මෙවලම් ඉඟි DOM නෝඩය එහි පළමු තර්කය ලෙසත්, ප්‍රේරක මූලද්‍රව්‍ය DOM නෝඩය එහි දෙවැන්න ලෙසත් හැඳින්වේ. සන්දර්භය මෙවලම් ඉඟි අවස්ථාවට thisසකසා ඇත.
selector තන්තුව | බොරු false තේරීම්කාරකයක් සපයා තිබේ නම්, මෙවලම් ඉඟි වස්තු නියමිත ඉලක්ක වෙත පවරනු ලැබේ. jQuery.onප්‍රායෝගිකව, ගතිකව එකතු කරන ලද DOM මූලද්‍රව්‍ය ( සහාය) සඳහා මෙවලම් ඉඟි යෙදීමට ද මෙය භාවිතා වේ . මෙය සහ තොරතුරු සහිත උදාහරණයක් බලන්න .
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 හරහා පමණි). වැඩි විස්තර සඳහා Popper's detectOverflow docs වෙත යොමු වන්න .
customClass තන්තුව | කාර්යය ''

එය පෙන්වන විට මෙවලම් ඉඟියට පන්ති එක් කරන්න. අච්චුවෙහි දක්වා ඇති ඕනෑම පංතියකට අමතරව මෙම පන්ති එකතු කරන බව සලකන්න. බහු පන්ති එකතු කිරීමට, ඒවා හිස්තැන් වලින් වෙන් කරන්න: 'class-1 class-2'.

අමතර පන්ති නම් අඩංගු තනි තන්තුවක් ආපසු ලබා දිය යුතු ශ්‍රිතයක් ද ඔබට සම්මත කළ හැක.
sanitize බූලියන් true සනීපාරක්ෂාව සක්රිය හෝ අක්රිය කරන්න. සක්‍රිය කර ඇත්නම් 'template'සහ 'title'විකල්ප සනීපාරක්ෂාව කෙරේ. අපගේ ජාවාස්ක්‍රිප්ට් ප්‍රලේඛනයේ සනීපාරක්ෂක අංශය බලන්න .
allowList වස්තුව පෙරනිමි අගය අවසර ලත් ගුණාංග සහ ටැග් අඩංගු වස්තුව
sanitizeFn ශුන්‍ය | කාර්යය null මෙහිදී ඔබට ඔබේම සනීපාරක්ෂක කාර්යය සැපයිය හැකිය. සනීපාරක්ෂාව සිදු කිරීම සඳහා කැපවූ පුස්තකාලයක් භාවිතා කිරීමට ඔබ කැමති නම් මෙය ප්‍රයෝජනවත් විය හැක.
offset අරාව | තන්තුව | කාර්යය [0, 0]

මෙවලම් ඉඟිය එහි ඉලක්කයට සාපේක්ෂව ඕෆ්සෙට්. ඔබට කොමාවෙන් වෙන් කළ අගයන් සමඟ දත්ත උපලක්ෂණ තුළ තන්තුවක් පසුකර යැවිය හැක:data-bs-offset="10,20"

ඕෆ්සෙට් තීරණය කිරීම සඳහා ශ්‍රිතයක් භාවිතා කරන විට, එය එහි පළමු තර්කය ලෙස පොපර් ස්ථානගත කිරීම, යොමුව සහ පොපර් රෙක්ට්ස් අඩංගු වස්තුවක් සමඟ හැඳින්වේ. ප්‍රේරක මූලද්‍රව්‍ය DOM නෝඩය දෙවන තර්කය ලෙස සම්මත වේ. ශ්‍රිතය අංක දෙකක් සහිත අරාවක් ආපසු ලබා දිය යුතුය: .[skidding, distance]

වැඩි විස්තර සඳහා Popper's offset docs වෙත යොමු වන්න .
popperConfig ශුන්‍ය | වස්තුව | කාර්යය null

Bootstrap හි පෙරනිමි පොපර් වින්‍යාසය වෙනස් කිරීමට, Popper හි වින්‍යාසය බලන්න .

Popper වින්‍යාසය නිර්මාණය කිරීමට ශ්‍රිතයක් භාවිතා කරන විට, එය Bootstrap හි පෙරනිමි පොපර් වින්‍යාසය අඩංගු වස්තුවක් සමඟින් හැඳින්වේ. එය ඔබගේම වින්‍යාසය සමඟ පෙරනිමිය භාවිතා කිරීමට සහ ඒකාබද්ධ කිරීමට උදවු කරයි. ශ්‍රිතය පොපර් සඳහා වින්‍යාස වස්තුවක් ආපසු ලබා දි�� යුතුය.

තනි මෙවලම් ඉඟි සඳහා දත්ත ගුණාංග

ඉහත පැහැදිලි කර ඇති පරිදි, දත්ත උපලක්ෂණ භාවිතයෙන්, තනි මෙවලම් ඉඟි සඳහා විකල්ප විකල්ප වශයෙන් සඳහන් කළ හැක.

සමඟ කාර්යය භාවිතා කිරීම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.tooltiphidden.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 මෙවලම් ඉඟිය පරිශීලකයාගෙන් සඟවා අවසන් වූ විට මෙම සිදුවීම සිදු වේ (CSS සංක්‍රාන්ති සම්පූර්ණ වන තෙක් බලා සිටිනු ඇත).
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()