முக்கிய உள்ளடக்கத்திற்கு செல்க டாக்ஸ் வழிசெலுத்தலுக்குச் செல்லவும்
in English

உதவிக்குறிப்புகள்

CSS மற்றும் JavaScript உடன் தனிப்பயன் பூட்ஸ்டார்ப் உதவிக்குறிப்புகளைச் சேர்ப்பதற்கான ஆவணங்கள் மற்றும் எடுத்துக்காட்டுகள் CSS3 ஐப் பயன்படுத்தி அனிமேஷன்கள் மற்றும் தரவு-பிஎஸ்-பண்புகள் உள்ளூர் தலைப்பு சேமிப்பகத்திற்கான.

இந்தப் பக்கத்தில்

கண்ணோட்டம்

உதவிக்குறிப்பு செருகுநிரலைப் பயன்படுத்தும் போது தெரிந்து கொள்ள வேண்டியவை:

  • டூல்டிப்ஸ் 3வது தரப்பு லைப்ரரி பாப்பரை பொருத்தி பொருத்துகிறது . நீங்கள் bootstrap.js க்கு முன் popper.min.js ஐ சேர்க்க வேண்டும் அல்லது டூல்டிப்கள் வேலை செய்ய, பாப்பர் கொண்டிருக்கும் bootstrap.bundle.min.js/ பயன்படுத்தவும்!bootstrap.bundle.js
  • செயல்திறன் காரணங்களுக்காக உதவிக்குறிப்புகள் தேர்வு செய்யப்படுகின்றன, எனவே அவற்றை நீங்களே துவக்க வேண்டும் .
  • பூஜ்ஜிய நீள தலைப்புகள் கொண்ட உதவிக்குறிப்புகள் ஒருபோதும் காட்டப்படாது.
  • மிகவும் சிக்கலான கூறுகளில் (எங்கள் உள்ளீட்டு குழுக்கள், பொத்தான் குழுக்கள் போன்றவை) ரெண்டரிங் container: 'body'சிக்கல்களைத் தவிர்க்க குறிப்பிடவும்.
  • மறைக்கப்பட்ட உறுப்புகளில் உதவிக்குறிப்புகளைத் தூண்டுவது வேலை செய்யாது.
  • ரேப்பர் உறுப்பில் உதவிக்குறிப்புகள் .disabledஅல்லது disabledஉறுப்புகள் தூண்டப்பட வேண்டும்.
  • பல வரிகளை உள்ளடக்கிய ஹைப்பர்லிங்க்களில் இருந்து தூண்டப்படும் போது, ​​டூல்டிப்கள் மையப்படுத்தப்படும். இந்த நடத்தையைத் தவிர்க்க white-space: nowrap;உங்கள் களில் பயன்படுத்தவும் .<a>
  • DOM இலிருந்து தொடர்புடைய உறுப்புகள் அகற்றப்படுவதற்கு முன், உதவிக்குறிப்புகள் மறைக்கப்பட வேண்டும்.
  • நிழல் DOM இன் உள்ளே உள்ள உறுப்புக்கு நன்றி உதவிக்குறிப்புகள் தூண்டப்படலாம்.
இயல்பாக, இந்தக் கூறு உள்ளமைக்கப்பட்ட உள்ளடக்க சுத்திகரிப்பாளரைப் பயன்படுத்துகிறது, இது வெளிப்படையாக அனுமதிக்கப்படாத எந்த HTML உறுப்புகளையும் அகற்றும். மேலும் விவரங்களுக்கு எங்கள் ஜாவாஸ்கிரிப்ட் ஆவணத்தில் உள்ள சானிடைசர் பகுதியைப் பார்க்கவும் .
இந்தக் கூறுகளின் அனிமேஷன் விளைவு 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 இல் பூட்ஸ்டார்ப்பைப் பயன்படுத்தும் போது திசைகள் பிரதிபலிக்கப்படுகின்றன.

<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;

பயன்பாடு

உதவிக்குறிப்பு செருகுநிரல் உள்ளடக்கம் மற்றும் தேவைக்கேற்ப மார்க்அப்பை உருவாக்குகிறது, மேலும் முன்னிருப்பாக உதவிக்குறிப்புகளை அவற்றின் தூண்டுதல் உறுப்புக்குப் பிறகு வைக்கிறது.

ஜாவாஸ்கிரிப்ட் வழியாக உதவிக்குறிப்பைத் தூண்டவும்:

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)
வழிதல் autoமற்றும்scroll

டூல்டிப் நிலை ஒரு பெற்றோர் கொள்கலனில் இருக்கும் போது overflow: autoஅல்லது overflow: scrollஎங்களின் விருப்பத்தை தானாக மாற்ற முயற்சிக்கிறது .table-responsive, ஆனால் அசல் இடத்தின் நிலைப்பாட்டை அப்படியே வைத்திருக்கும். இதைத் தீர்க்க , இயல்புநிலை மதிப்பை மேலெழுத எந்த HTMLElement க்கும் boundaryவிருப்பத்தை (விருப்பத்தைப் பயன்படுத்தி ஃபிளிப் மாற்றிக்கு ) அமைக்கவும் ,popperConfig'clippingParents'document.body

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

மார்க்அப்

உதவிக்குறிப்புக்கு தேவையான மார்க்அப் என்பது ஒரு dataபண்புக்கூறு மட்டுமே மற்றும் titleHTML உறுப்பில் நீங்கள் ஒரு உதவிக்குறிப்பை வைத்திருக்க விரும்புகிறீர்கள். டூல்டிப்பின் உருவாக்கப்பட்ட மார்க்அப் மிகவும் எளிமையானது, இருப்பினும் அதற்கு ஒரு நிலை தேவைப்படுகிறது (இயல்பாக, topசொருகி மூலம் அமைக்கப்பட்டது).

விசைப்பலகை மற்றும் உதவி தொழில்நுட்ப பயனர்களுக்கு உதவிக்குறிப்புகளை வேலை செய்யும்

பாரம்பரியமாக கீபோர்டு-ஃபோகஸ் செய்யக்கூடிய மற்றும் ஊடாடும் (இணைப்புகள் அல்லது படிவக் கட்டுப்பாடுகள் போன்றவை) HTML உறுப்புகளுக்கு உதவிக்குறிப்புகளை மட்டுமே சேர்க்க வேண்டும். பண்புக்கூறைச் சேர்ப்பதன் மூலம் தன்னிச்சையான HTML உறுப்புகள் ( <span>கள் போன்றவை) கவனம் செலுத்த முடியும் என்றாலும், இது விசைப்பலகை பயனர்களுக்கு ஊடாடாத கூறுகளில் 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ஊடாடக்கூடியவை அல்ல, அதாவது, உதவிக்குறிப்பை (அல்லது பாப்ஓவர்) தூண்டுவதற்கு பயனர்கள் கவனம் செலுத்தவோ, வட்டமிடவோ அல்லது கிளிக் செய்யவோ முடியாது. ஒரு தீர்வாக, <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>

விருப்பங்கள்

தரவு பண்புக்கூறுகள் அல்லது ஜாவாஸ்கிரிப்ட் மூலம் விருப்பங்களை அனுப்பலாம். data-bs-தரவு பண்புக்கூறுகளுக்கு, இல் உள்ளதைப் போல விருப்பப் பெயரைச் சேர்க்கவும் data-bs-animation="". டேட்டா பண்புக்கூறுகள் வழியாக விருப்பங்களை அனுப்பும் போது, ​​விருப்பப் பெயரின் கேஸ் வகையை CamelCase இலிருந்து kebab-case ஆக மாற்றுவதை உறுதிசெய்யவும். உதாரணமாக, பயன்படுத்துவதற்கு பதிலாக data-bs-customClass="beautifier", பயன்படுத்தவும் data-bs-custom-class="beautifier".

பாதுகாப்பு காரணங்களுக்காக, sanitizeதரவு பண்புக்கூறுகளைப் பயன்படுத்தி sanitizeFn, மற்றும் allowListவிருப்பங்களை வழங்க முடியாது என்பதை நினைவில் கொள்ளவும்.
பெயர் வகை இயல்புநிலை விளக்கம்
animation பூலியன் true உதவிக்குறிப்பில் CSS மங்கல் மாற்றத்தைப் பயன்படுத்தவும்
container சரம் | உறுப்பு | பொய் false

ஒரு குறிப்பிட்ட உறுப்புடன் உதவிக்குறிப்பைச் சேர்க்கிறது. உதாரணம்: container: 'body'. இந்த விருப்பம் குறிப்பாக பயனுள்ளதாக இருக்கும், இது ஆவணத்தின் ஓட்டத்தில் டூல்டிப்பை தூண்டும் உறுப்புக்கு அருகில் நிலைநிறுத்த அனுமதிக்கிறது - இது சாளரத்தின் மறுஅளவின் போது தூண்டுதல் உறுப்பிலிருந்து டூல்டிப் மிதப்பதைத் தடுக்கும்.
delay எண் | பொருள் 0

உதவிக்குறிப்பை (மிஎஸ்) காட்டுவது மற்றும் மறைப்பது தாமதம் - கையேடு தூண்டுதல் வகைக்கு பொருந்தாது

ஒரு எண் வழங்கப்பட்டால், மறை/காட்சி இரண்டிற்கும் தாமதம் பயன்படுத்தப்படும்

பொருளின் அமைப்பு:delay: { "show": 500, "hide": 100 }
html பூலியன் false

உதவிக்குறிப்பில் HTML ஐ அனுமதிக்கவும்.

உண்மை எனில், உதவிக்குறிப்பில் உள்ள HTML குறிச்சொற்கள் உதவிக்குறிப்பில் titleவழங்கப்படும். தவறு எனில் innerText, DOM இல் உள்ளடக்கத்தைச் செருக சொத்து பயன்படுத்தப்படும்.

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 ஆவணத்தைப் பார்க்கவும் .
customClass சரம் | செயல்பாடு ''

உதவிக்குறிப்பு காட்டப்படும்போது வகுப்புகளைச் சேர்க்கவும். டெம்ப்ளேட்டில் குறிப்பிடப்பட்டுள்ள எந்த வகுப்புகளுக்கும் கூடுதலாக இந்த வகுப்புகள் சேர்க்கப்படும் என்பதை நினைவில் கொள்ளவும். பல வகுப்புகளைச் சேர்க்க, அவற்றை இடைவெளிகளுடன் பிரிக்கவும்: 'class-1 class-2'.

கூடுதல் வகுப்புப் பெயர்களைக் கொண்ட ஒற்றை சரத்தை வழங்கும் செயல்பாட்டையும் நீங்கள் அனுப்பலாம்.
sanitize பூலியன் true சுத்தப்படுத்துதலை இயக்கவும் அல்லது முடக்கவும். செயல்படுத்தப்பட்டால் 'template'மற்றும் 'title'விருப்பங்கள் சுத்தப்படுத்தப்படும். எங்கள் ஜாவாஸ்கிரிப்ட் ஆவணத்தில் சானிடைசர் பகுதியைப் பார்க்கவும் .
allowList பொருள் இயல்புநிலை மதிப்பு அனுமதிக்கப்பட்ட பண்புக்கூறுகள் மற்றும் குறிச்சொற்களைக் கொண்ட பொருள்
sanitizeFn பூஜ்ய | செயல்பாடு null இங்கே நீங்கள் உங்கள் சொந்த சுத்திகரிப்பு செயல்பாட்டை வழங்கலாம். சுத்திகரிப்பு செய்ய பிரத்யேக நூலகத்தைப் பயன்படுத்த விரும்பினால் இது பயனுள்ளதாக இருக்கும்.
offset வரிசை | சரம் | செயல்பாடு [0, 0]

அதன் இலக்குடன் தொடர்புடைய உதவிக்குறிப்பின் ஆஃப்செட். கமாவால் பிரிக்கப்பட்ட மதிப்புகளுடன் தரவு பண்புக்கூறுகளில் ஒரு சரத்தை நீங்கள் அனுப்பலாம்:data-bs-offset="10,20"

ஆஃப்செட்டைத் தீர்மானிக்க ஒரு செயல்பாடு பயன்படுத்தப்படும்போது, ​​அதன் முதல் வாதமாக பாப்பர் பிளேஸ்மென்ட், குறிப்பு மற்றும் பாப்பர் ரெக்ட்ஸ் ஆகியவற்றைக் கொண்ட ஒரு பொருளுடன் அது அழைக்கப்படுகிறது. தூண்டுதல் உறுப்பு DOM முனை இரண்டாவது வாதமாக அனுப்பப்பட்டது. செயல்பாடு இரண்டு எண்களைக் கொண்ட வரிசையை வழங்க வேண்டும்: .[skidding, distance]

மேலும் தகவலுக்கு, பாப்பரின் ஆஃப்செட் டாக்ஸைப் பார்க்கவும் .
popperConfig பூஜ்ய | பொருள் | செயல்பாடு null

பூட்ஸ்டார்ப்பின் இயல்புநிலை பாப்பர் கட்டமைப்பை மாற்ற, பாப்பரின் உள்ளமைவைப் பார்க்கவும் .

பாப்பர் உள்ளமைவை உருவாக்க ஒரு செயல்பாடு பயன்படுத்தப்படும் போது, ​​அது பூட்ஸ்டார்ப்பின் இயல்புநிலை பாப்பர் உள்ளமைவைக் கொண்ட ஒரு பொருளுடன் அழைக்கப்படுகிறது. இது உங்கள் சொந்த உள்ளமைவுடன் இயல்புநிலையைப் பயன்படுத்தவும் இணைக்கவும் உதவுகிறது. செயல்பாடு பாப்பருக்கான உள்ளமைவு பொருளைத் தர வேண்டும்.

தனிப்பட்ட உதவிக்குறிப்புகளுக்கான தரவு பண்புக்கூறுகள்

மேலே விளக்கப்பட்டுள்ளபடி, தனிப்பட்ட டூல்டிப்புகளுக்கான விருப்பங்களை தரவு பண்புக்கூறுகளின் மூலம் மாற்றாகக் குறிப்பிடலாம்.

உடன் செயல்பாட்டைப் பயன்படுத்துதல்popperConfig

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

முறைகள்

ஒத்திசைவற்ற முறைகள் மற்றும் மாற்றங்கள்

அனைத்து API முறைகளும் ஒத்திசைவற்றவை மற்றும் மாற்றத்தைத் தொடங்குகின்றன . மாற்றம் தொடங்கப்பட்டவுடன், ஆனால் அது முடிவதற்குள் அவர்கள் அழைப்பாளரிடம் திரும்புகிறார்கள் . கூடுதலாக, மாற்றும் கூறுகளின் முறை அழைப்பு புறக்கணிக்கப்படும் .

மேலும் தகவலுக்கு எங்கள் ஜாவாஸ்கிரிப்ட் ஆவணங்களைப் பார்க்கவும் .

நிகழ்ச்சி

ஒரு உறுப்பின் உதவிக்குறிப்பை வெளிப்படுத்துகிறது. உதவிக்குறிப்பு உண்மையில் காட்டப்படுவதற்கு முன்பு அழைப்பாளருக்குத் திரும்புகிறது (அதாவது 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

நிகழ்வுகள்

நிகழ்வு வகை விளக்கம்
show.bs.tooltip showநிகழ்வு முறை என்று அழைக்கப்படும் போது இந்த நிகழ்வு உடனடியாக சுடுகிறது .
shown.bs.tooltip டூல்டிப் பயனருக்குத் தெரிந்தவுடன் இந்த நிகழ்வு நீக்கப்படும் (CSS மாற்றங்கள் முடிவடையும் வரை காத்திருக்கும்).
hide.bs.tooltip hideநிகழ்வு முறை அழைக்கப்பட்டவுடன் இந்த நிகழ்வு உடனடியாக நீக்கப்படும் .
hidden.bs.tooltip டூல்டிப் பயனரிடமிருந்து மறைக்கப்பட்டு முடிந்ததும் இந்த நிகழ்வு நீக்கப்படும் (CSS மாற்றங்கள் முடியும் வரை காத்திருக்கும்).
inserted.bs.tooltip show.bs.tooltipDOM இல் டூல்டிப் டெம்ப்ளேட் சேர்க்கப்படும் போது, ​​நிகழ்வுக்குப் பிறகு இந்த நிகழ்வு நீக்கப்படும் . 
var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)

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

tooltip.hide()