Source

මෙවලම් ඉඟි

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

දළ විශ්ලේෂණය

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

  • මෙවලම් ඉඟි ස්ථානගත කිරීම සඳහා 3වන පාර්ශ්ව පුස්තකාලය Popper.js මත රඳා පවතී . ඔබ bootstrap.js වලට පෙර popper.min.js ඇතුළත් කළ යුතුය හෝ මෙවලම් ඉඟි ක්‍රියා කිරීම සඳහා Popper.js අඩංගු bootstrap.bundle.min.js/ භාවිතා කරන්න!bootstrap.bundle.js
  • ඔබ අපගේ ජාවාස්ක්‍රිප්ට් නිර්මාණය කරන්නේ මූලාශ්‍රයෙන් නම්, එයට අවශ්‍ය වේutil.js .
  • කාර්ය සාධන හේතූන් මත මෙවලම් ඉඟි තෝරාගෙන ඇත, එබැවින් ඔබ ඒවා ඔබම ආරම්භ කළ යුතුය .
  • ශුන්‍ය-දිග මාතෘකා සහිත මෙවලම් ඉඟි කිසිවිටෙක නොපෙන්වයි.
  • container: 'body'වඩාත් සංකීර්ණ සංරචකවල (අපගේ ආදාන කණ්ඩායම්, බොත්තම් කණ්ඩායම්, ආදිය) විදැහුම්කරණ ගැටළු වළක්වා ගැනීමට සඳහන් කරන්න .
  • සැඟවුණු මූලද්‍රව්‍ය මත මෙවලම් ඉඟි අවුලුවාලීම ක්‍රියා නොකරයි.
  • දවටන මූලද්‍රව්‍යයක් මත .disabledහෝ disabledමූලද්‍රව්‍ය සඳහා මෙවලම් ඉඟි ක්‍රියාත්මක කළ යුතුය.
  • බහු රේඛා හරහා විහිදෙන අධිසබැඳි වලින් ක්‍රියාරම්භ කරන විට, මෙවලම් ඉඟි මධ්‍යගත වනු ඇත. මෙම හැසිරීම වළක්වා ගැනීමට white-space: nowrap;ඔබේ s මත භාවිතා කරන්න .<a>
  • DOM වෙතින් අනුරූප මූලද්‍රව්‍ය ඉවත් කිරීමට පෙර මෙවලම් ඉඟි සැඟවිය යුතුය.
  • සෙවනැලි DOM එකක් තුළ ඇති මූලද්‍රව්‍යයකට ස්තුති වන්නට මෙවලම් ඉඟි ක්‍රියාරම්භ කළ හැක.

මෙම සංරචකයේ සජීවිකරණ බලපෑම prefers-reduced-motionමාධ්‍ය විමසුම මත රඳා පවතී. අපගේ ප්‍රවේශ්‍යතා ලේඛනවල අඩු කළ චලන කොටස බලන්න .

ඒ සියල්ල ලැබුණාද? නියමයි, උදාහරණ කිහිපයක් සමඟ ඔවුන් වැඩ කරන්නේ කෙසේදැයි බලමු.

උදාහරණය: සෑම තැනකම මෙවලම් ඉඟි සබල කරන්න

පිටුවක සියලුම මෙවලම් ඉඟි ආරම්භ කිරීමට එක් ක්‍රමයක් වනුයේ ඒවායේ data-toggleගුණාංගය අනුව ඒවා තෝරාගැනීමයි:

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

උදාහරණ

මෙවලම් ඉඟි බැලීමට පහත සබැඳි මත සැරිසරන්න:

තද කලිසම් ඊළඟ මට්ටමේ keffiyeh ඔබ ඒවා ගැන අසා නැතුව ඇති. ඡායාරූප කුටිය රැවුල අමු ඩෙනිම් ලෙටර්ප්‍රෙස් වීගන් මැසෙන්ජර් බෑග් ස්ටම්ප්ටවුන්. Farm-to-Table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel වල ටෙරී රිචඩ්සන් vinyl chambray ඇත. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel Williamsburg marfa, four loko mcsweeney's cleanse Vegan chambray. ඇත්ත වශයෙන්ම උත්ප්‍රාසාත්මක ශිල්පියෙක් ඕනෑම කීටාර් , සීන්ස්ටර් ෆාම්-ටු-ටේබල් බෑන්ක්සි ඔස්ටින් ට්විටර් හැන්ඩ්ල් ෆ්‍රීගන් ක්‍රෙඩ් අමු ඩෙනිම් තනි සම්භවයක් ඇති කෝපි වෛරස්.

මෙවලම් ඉඟි හතර බැලීමට පහත බොත්තම් මත සැරිසරන්න: ඉහළ, දකුණ, පහළ සහ වම.

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

සහ අභිරුචි HTML එකතු කිරීම සමඟ:

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

භාවිතය

මෙවලම් ඉඟි ප්ලගිනය ඉල්ලුම මත අන්තර්ගතය සහ සලකුණු උත්පාදනය කරයි, සහ පෙරනිමියෙන් මෙවලම් ඉඟි ඒවායේ ප්‍රේරක මූලද්‍රව්‍යයට පසුව තබයි.

JavaScript හරහා මෙවලම් ඉඟිය ක්‍රියාරම්භ කරන්න:

$('#example').tooltip(options)
පිටාර ගැලීම autoසහscroll

මෙවලම් ඉඟියේ පිහිටීම මව් බහාලුමක් ඇති විට overflow: autoහෝ overflow: scrollඅපගේ කැමති විට ස්වයංක්‍රීයව වෙනස් වීමට උත්සාහ කරයි .table-responsive, නමුත් තවමත් මුල් ස්ථානගත කිරීමේ ස්ථානගත කිරීම තබා ගනී. විසඳීමට, boundaryපෙරනිමි අගය හැර වෙනත් ඕනෑම දෙයකට විකල්පය සකසන්න 'scrollParent', වැනි 'window':

$('#example').tooltip({ boundary: 'window' })

සලකුණු කිරීම

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

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

ඔබ සම්ප්‍රදායිකව යතුරුපුවරුව නාභිගත කළ හැකි සහ අන්තර්ක්‍රියාකාරී (සබැඳි හෝ පෝරම පාලන වැනි) HTML මූලද්‍රව්‍ය වෙත මෙවලම් ඉඟි පමණක් එක් කළ යුතුය. අත්තනෝමතික HTML මූලද්‍රව්‍ය ( <span>s වැනි) උපලක්ෂණය එක් කිරීමෙන් නාභිගත කළ හැකි වුවද tabindex="0", මෙය යතුරුපුවරු භාවිතා කරන්නන් සඳහා අන්තර්ක්‍රියාකාරී නොවන මූලද්‍රව්‍ය මත කරදරකාරී සහ ව්‍යාකූල ටැබ් නැවතුම් එක් කරනු ඇත. මීට අමතරව, බොහෝ උපකාරක තාක්ෂණයන් දැනට මෙම තත්ත්වය තුළ මෙවලම් ඉඟිය නිවේදනය නොකරයි.

hoverමීට අමතරව, ඔබගේ මෙවලම් ඉඟිය සඳහා ප්‍රේරකය ලෙස පමණක් රඳා නොසිටින්න , මෙය ඔබගේ මෙවලම් ඉඟි යතුරුපුවරු භාවිතා කරන්නන් හට ක්‍රියාරම්භ කිරීමට නොහැකි කරයි.

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

ආබාධිත මූලද්රව්ය

උපලක්ෂණය සහිත මූලද්‍රව්‍ය disabledඅන්තර්ක්‍රියාකාරී නොවේ, එනම් පරිශීලකයින්ට මෙවලම් ඉඟියක් (හෝ popover) ක්‍රියාරම්භ කිරීමට ඒවා නාභිගත කිරීමට, සැරිසැරීමට හෝ ක්ලික් කිරීමට නොහැක. විසඳුමක් ලෙස, ඔබට මෙවලම් ඉඟිය දවටනයකින් ක්‍රියාරම්භ කිරීමට අවශ්‍ය වනු ඇත, <div>නැතහොත් <span>, භාවිතා කරමින් යතුරුපුවරුව නාභිගත කළ හැකි ඉතා මැනවින් සාදා , සහ අක්‍රිය මූලද්‍රව්‍යය tabindex="0"අභිබවා යාමට අවශ්‍ය වනු ඇත.pointer-events

<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

විකල්ප

දත්ත ගුණාංග හෝ JavaScript හරහා විකල්ප ලබා දිය හැක. දත්ත උපලක්ෂණ සඳහා, විකල්ප නාමය data-, ලෙසට එකතු කරන්න data-animation="".

නම ටයිප් කරන්න පෙරනිමිය විස්තර
සජීවිකරණය බූලියන් සැබෑ මෙවලම් ඉඟියට CSS ෆේඩ් සංක්‍රාන්තියක් යොදන්න
බහාලුම් තන්තුව | මූලද්රව්යය | බොරු බොරු

විශේෂිත මූලද්‍රව්‍යයකට මෙවලම් ඉඟිය එක් කරයි. උදාහරණය container: 'body':. මෙම විකල්පය විශේෂයෙන් ප්‍රයෝජනවත් වන්නේ එය ප්‍රේරක මූලද්‍රව්‍ය අසල ලේඛනයේ ප්‍රවාහයේ මෙවලම් ඉඟිය ස්ථානගත කිරීමට ඔබට ඉඩ සලසයි - එමඟින් කවුළුව ප්‍රමාණය වෙනස් කිරීමේදී මෙවලම් ඉඟිය ප්‍රේරක මූලද්‍රව්‍යයෙන් ඉවතට පාවීම වළක්වයි.
ප්රමාදය අංකය | වස්තුව 0

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

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

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

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

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

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

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

ස්ථානගත කිරීම තීරණය කිරීම සඳහා ශ්‍රිතයක් භාවිතා කරන විට, එය මෙවලම් ඉඟි DOM නෝඩය එහි පළමු තර්කය ලෙසත්, ප්‍රේරක මූලද්‍රව්‍ය DOM නෝඩය එහි දෙවැන්න ලෙසත් හැඳින්වේ. සන්දර්භය මෙවලම් ඉඟි අවස්ථාවට thisසකසා ඇත.
තේරීම්කරු තන්තුව | බොරු බොරු තේරීම්කාරකයක් සපයා තිබේ නම්, මෙවලම් ඉඟි වස්තු නියමිත ඉලක්ක වෙත පවරනු ලැබේ. jQuery.onප්‍රායෝගිකව, ගතිකව එකතු කරන ලද DOM මූලද්‍රව්‍ය ( සහාය) සඳහා මෙවලම් ඉඟි යෙදීමට ද මෙය භාවිතා වේ . මෙය සහ තොරතුරු සහිත උදාහරණයක් බලන්න .
සැකිල්ල නූල් '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

මෙවලම් ඉඟිය සෑදීමේදී භාවිතා කිරීමට මූලික HTML.

මෙවලම් ඉඟිය titleතුළට එන්නත් කරනු ලැබේ .tooltip-inner.

.arrowමෙවලම් ඉඟියේ ඊතලය බවට පත් වනු ඇත.

පිටතම දවටන මූලද්‍රව්‍යයේ .tooltipපන්තිය සහ role="tooltip".
ශීර්ෂය තන්තුව | මූලද්රව්යය | කාර්යය ''

titleගුණාංගය නොමැති නම් පෙරනිමි මාතෘකා අගය .

ශ්‍රිතයක් ලබා දෙන්නේ නම්, එය thisමෙවලම් තුඩය අමුණා ඇති මූලද්‍රව්‍ය වෙත යොමු කර ඇත.
අවුලුවාලීම නූල් 'හවර් ෆෝකස්'

මෙවලම් ඉඟිය අවුලුවන ආකාරය - ක්ලික් කරන්න | සැරිසරනවා | අවධානය | අත්පොත. ඔබට ප්‍රේරක කිහිපයක් සමත් විය හැක; අවකාශය සමඟ ඒවා වෙන් කරන්න.

'manual'සහ ක්‍රම හරහා මෙවලම් ඉඟිය ක්‍රමලේඛනාත්මකව ක්‍රියාත්මක වන බව පෙන්නුම් .tooltip('show')කරයි ; මෙම අගය වෙනත් ප්‍රේරකයක් සමඟ ඒකාබද්ධ කළ නොහැක..tooltip('hide').tooltip('toggle')

'hover'යතුරුපුවරුව හරහා ක්‍රියා විරහිත කළ නොහැකි මෙවලම් ඉඟි එහිම ප්‍රතිඵලයක් වනු ඇති අතර යතුරුපුවරු භාවිතා කරන්නන් සඳහා එකම තොරතුරු ලබා දීම සඳහා විකල්ප ක්‍රම තිබේ නම් පමණක් භාවිතා කළ යුතුය.
ඕෆ්සෙට් අංකය | නූල් 0 මෙවලම් ඉඟිය එහි ඉලක්කයට සාපේක්ෂව ඕෆ්සෙට්. වැඩි විස්තර සඳහා Popper.js හි ඕෆ්සෙට් ලේඛන වෙත යොමු වන්න .
පහත වැටීම ස්ථානගත කිරීම තන්තුව | අරාව 'පෙරළන්න' පසුබැසීමේදී Popper භාවිතා කරන්නේ කුමන ස්ථානයද යන්න සඳහන් කිරීමට ඉඩ දෙන්න. වැඩි විස්තර සඳහා Popper.js හි හැසිරීම් ලේඛන වෙත යොමු වන්න
මායිම තන්තුව | මූලද්රව්යය 'scrollParent' මෙවලම් ඉඟියේ පිටාර ගැලීමේ සීමාව. 'viewport', 'window', 'scrollParent', හෝ HTMLElement යොමු (JavaScript පමණි) අගයන් පිළිගනී. වැඩි විස්තර සඳහා Popper.js's preventOverflow docs වෙත යොමු වන්න .

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

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

ක්රම

අසමමුහුර්ත ක්රම සහ සංක්රාන්ති

සියලුම API ක්‍රම අසමමුහුර්ත වන අතර සංක්‍රාන්තියක් ආරම්භ කරන්න . සංක්‍රාන්තිය ආරම්භ වූ වහාම නමුත් එය අවසන් වීමට පෙර ඔවුන් නැවත අමතන්නා වෙත පැමිණේ . ඊට අමතරව, සංක්‍රාන්ති සංරචකයක ක්‍රම ඇමතුමක් නොසලකා හරිනු ඇත .

වැඩි විස්තර සඳහා අපගේ JavaScript ලේඛන බලන්න .

$().tooltip(options)

මූලද්‍රව්‍ය එකතුවකට මෙවලම් ඉඟි හසුරුවන්නක් අමුණන්න.

.tooltip('show')

මූලද්‍රව්‍යයක මෙවලම් ඉඟියක් හෙළි කරයි. මෙවලම් ඉඟිය ඇත්ත වශයෙන්ම පෙන්වීමට පෙර (එනම් සිදුවීම සිදුවීමට පෙර) ඇමතුම්කරු වෙත ආපසු පැමිණේ. shown.bs.tooltipමෙය මෙවලම් ඉඟියේ "අත්පොත" අවුලුවන ලෙස සැලකේ. ශුන්‍ය-දිග මාතෘකා සහිත මෙවලම් ඉඟි කිසිවිටෙක නොපෙන්වයි.

$('#element').tooltip('show')

.tooltip('hide')

මූලද්‍රව්‍යයක මෙවලම් ඉඟිය සඟවයි. මෙවලම් ඉඟිය සැබවින්ම සැඟවීමට පෙර (එනම් සිදුවීම සිදුවීමට පෙර) ඇමතුම්කරු වෙත ආපසු පැමිණේ. hidden.bs.tooltipමෙය මෙවලම් ඉඟියේ "අත්පොත" අවුලුවන ලෙස සැලකේ.

$('#element').tooltip('hide')

.tooltip('toggle')

මූලද්‍රව්‍යයක මෙවලම් ඉඟිය ටොගල් කරයි. මෙවලම් ඉඟිය ඇත්ත වශයෙන්ම පෙන්වීමට හෝ සැඟවීමට පෙර (එනම් සිදුවීමට හෝ සිදුවීමට පෙර) ඇමතුම්කරු වෙත ආපසු පැමිණේ. මෙය මෙවලම් ඉඟියේ "අත්පොත" අවුලුවන ලෙස සැලකේ.shown.bs.tooltiphidden.bs.tooltip

$('#element').tooltip('toggle')

.tooltip('dispose')

මූලද්‍රව්‍යයක මෙවලම් ඉඟිය සඟවා විනාශ කරයි. නියෝජිතායතනය භාවිතා කරන මෙවලම් ඉඟි ( විකල්පය භාවිතයෙන් සාදනු ලැබේ )selector පැවත එන ප්‍රේරක මූලද්‍රව්‍ය මත තනි තනිව විනාශ කළ නොහැක.

$('#element').tooltip('dispose')

.tooltip('enable')

මූලද්‍රව්‍යයක මෙවලම් ඉඟියට පෙන්වීමේ හැකියාව ලබා දෙයි. මෙවලම් ඉඟි පෙරනිමියෙන් සක්‍රීය කර ඇත.

$('#element').tooltip('enable')

.tooltip('disable')

මූලද්‍රව්‍යයක මෙවලම් ඉඟිය පෙන්වීමට ඇති හැකියාව ඉවත් කරයි. මෙවලම් ඉඟිය පෙන්විය හැක්කේ එය නැවත සබල කර ඇත්නම් පමණි.

$('#element').tooltip('disable')

.tooltip('toggleEnabled')

මූලාංගයක මෙවලම් ඉඟිය පෙන්වීමට හෝ සැඟවීමට ඇති හැකියාව ටොගල් කරයි.

$('#element').tooltip('toggleEnabled')

.tooltip('update')

මූලද්‍රව්‍යයක මෙවලම් ඉඟියේ පිහිටීම යාවත්කාලීන කරයි.

$('#element').tooltip('update')

සිදුවීම්

සිදුවීම් වර්ගය විස්තර
show.bs.tooltip showනිදසුන් ක්‍රමය හැඳින්වූ විට මෙම සිදුවීම වහාම ක්‍රියාත්මක වේ.
පෙන්වා ඇත.bs.tooltip මෙවලම් ඉඟිය පරිශීලකයාට දෘශ්‍යමාන කර ඇති විට මෙම සිදුවීම ක්‍රියාත්මක වේ (CSS සංක්‍රාන්ති සම්පූර්ණ වන තෙක් බලා සිටිනු ඇත).
hide.bs.tooltip hideනිදසුන් ක්‍රමය කැඳවූ විට මෙම සිදුවීම වහාම ක්‍රියාත්මක වේ.
සැඟවුණු.bs.උපකරණ ඉඟිය මෙවලම් ඉඟිය පරිශීලකයාගෙන් සඟවා අවසන් වූ විට මෙම සිදුවීම සිදු වේ (CSS සංක්‍රාන්ති සම්පූර්ණ වන තෙක් බලා සිටිනු ඇත).
inserted.bs.tooltip show.bs.tooltipමෙවලම් ඉඟි අච්චුව DOM වෙත එක් කළ විට මෙම සිදුවීම සිදුවීමෙන් පසුව සිදු කෙරේ . 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})