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

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

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

கண்ணோட்டம்

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

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

அதெல்லாம் கிடைத்ததா? அருமை, சில எடுத்துக்காட்டுகளுடன் அவை எவ்வாறு செயல்படுகின்றன என்பதைப் பார்ப்போம்.

இயல்பாக, இந்த கூறு உள்ளமைக்கப்பட்ட உள்ளடக்க சுத்திகரிப்பாளரைப் பயன்படுத்துகிறது, இது வெளிப்படையாக அனுமதிக்கப்படாத எந்த HTML உறுப்புகளையும் அகற்றும். மேலும் விவரங்களுக்கு எங்கள் ஜாவாஸ்கிரிப்ட் ஆவணத்தில் உள்ள சானிடைசர் பகுதியைப் பார்க்கவும் .

இந்தக் கூறுகளின் அனிமேஷன் விளைவு prefers-reduced-motionமீடியா வினவலைச் சார்ந்தது. எங்கள் அணுகல்தன்மை ஆவணத்தின் குறைக்கப்பட்ட இயக்கம் பகுதியைப் பார்க்கவும் .

எடுத்துக்காட்டுகள்

உதவிக்குறிப்புகளை இயக்கு

மேலே குறிப்பிட்டுள்ளபடி, உதவிக்குறிப்புகளைப் பயன்படுத்துவதற்கு முன்பு நீங்கள் அவற்றைத் துவக்க வேண்டும். ஒரு பக்கத்தில் உள்ள அனைத்து உதவிக்குறிப்புகளையும் தொடங்குவதற்கான ஒரு வழி, அவற்றின் பண்புக்கூறு மூலம் அவற்றைத் தேர்ந்தெடுப்பது data-bs-toggle, இது போன்றது:

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

இணைப்புகளில் உதவிக்குறிப்புகள்

உதவிக்குறிப்புகளைப் பார்க்க கீழே உள்ள இணைப்புகளின் மீது வட்டமிடுங்கள்:

html

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

தயங்காமல் உங்கள் HTML titleஐப் பயன்படுத்தவும். data-bs-titleபயன்படுத்தப்படும் போது , உறுப்பு வழங்கப்படுகையில் title, பாப்பர் தானாகவே அதை மாற்றும் .data-bs-title

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

v5.2.0 இல் சேர்க்கப்பட்டது

CSS மாறிகளைப் பயன்படுத்தி உதவிக்குறிப்புகளின் தோற்றத்தை நீங்கள் தனிப்பயனாக்கலாம் . எங்கள் தனிப்பயன் தோற்றத்தைக் கண்டறிய தனிப்பயன் வகுப்பை அமைத்துள்ளோம் data-bs-custom-class="custom-tooltip"மற்றும் உள்ளூர் CSS மாறியை மேலெழுத அதைப் பயன்படுத்துகிறோம்.

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

html

<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

மாறிகள்

v5.2.0 இல் சேர்க்கப்பட்டது

பூட்ஸ்டார்ப்பின் வளரும் 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

பயன்பாடு

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

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

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

வழிதல் `auto`மற்றும்`scroll`

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

const tooltip = new bootstrap.Tooltip('#example', {
  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" 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"

html

<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}". தரவு பண்புக்கூறுகள் வழியாக விருப்பங்களை அனுப்பும் போது, " camelCase " என்பதிலிருந்து " kebab-case " என்ற விருப்பப் பெயரின் கேஸ் வகையை மாற்றுவதை உறுதிசெய்யவும் . எடுத்துக்காட்டாக, க்கு 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}'.

பாதுகாப்பு காரணங்களுக்காக, sanitizeதரவு பண்புக்கூறுகளைப் பயன்படுத்தி sanitizeFn, மற்றும் allowListவிருப்பங்களை வழங்க முடியாது என்பதை நினைவில் கொள்ளவும்.

பெயர்	வகை	இயல்புநிலை	விளக்கம்
`allowList`	பொருள்	இயல்புநிலை மதிப்பு	அனுமதிக்கப்பட்ட பண்புக்கூறுகள் மற்றும் குறிச்சொற்களைக் கொண்ட பொருள்.
`animation`	பூலியன்	`true`	உதவிக்குறிப்பில் CSS மங்கல் மாற்றத்தைப் பயன்படுத்தவும்.
`boundary`	சரம், உறுப்பு	`'clippingParents'`	டூல்டிப்பின் ஓவர்ஃப்ளோ கன்ஸ்ட்ரெய்ன்ட் எல்லை (பாப்பரின் தடுப்பு ஓவர்ஃப்ளோ மாற்றியருக்கு மட்டுமே பொருந்தும்). இயல்பாக, இது `'clippingParents'`ஒரு HTMLElement குறிப்பை ஏற்கலாம் (JavaScript வழியாக மட்டும்). மேலும் தகவலுக்கு, Popper's detectOverflow ஆவணத்தைப் பார்க்கவும் .
`container`	சரம், உறுப்பு, தவறான	`false`	ஒரு குறிப்பிட்ட உறுப்புடன் உதவிக்குறிப்பைச் சேர்க்கிறது. உதாரணம்: `container: 'body'`. இந்த விருப்பம் குறிப்பாக பயனுள்ளதாக இருக்கும், இது ஆவணத்தின் ஓட்டத்தில் டூல்டிப்பை தூண்டும் உறுப்புக்கு அருகில் நிலைநிறுத்த அனுமதிக்கிறது - இது சாளரத்தின் மறுஅளவின் போது தூண்டுதல் உறுப்பிலிருந்து டூல்டிப் மிதப்பதைத் தடுக்கும்.
`customClass`	சரம், செயல்பாடு	`''`	உதவிக்குறிப்பு காட்டப்படும்போது வகுப்புகளைச் சேர்க்கவும். டெம்ப்ளேட்டில் குறிப்பிடப்பட்டுள்ள எந்த வகுப்புகளுக்கும் கூடுதலாக இந்த வகுப்புகள் சேர்க்கப்படும் என்பதை நினைவில் கொள்ளவும். பல வகுப்புகளைச் சேர்க்க, அவற்றை இடைவெளிகளுடன் பிரிக்கவும்: `'class-1 class-2'`. கூடுதல் வகுப்புப் பெயர்களைக் கொண்ட ஒற்றை சரத்தை வழங்கும் செயல்பாட்டையும் நீங்கள் அனுப்பலாம்.
`delay`	எண், பொருள்	`0`	உதவிக்குறிப்பை (மிஎஸ்) காட்டுவது மற்றும் மறைப்பது தாமதமானது-கையேடு தூண்டுதல் வகைக்கு பொருந்தாது. எண் வழங்கப்பட்டால், மறை/காட்சி இரண்டிற்கும் தாமதம் பயன்படுத்தப்படும். பொருளின் அமைப்பு: `delay: { "show": 500, "hide": 100 }`.
`fallbackPlacements`	வரிசை	`['top', 'right', 'bottom', 'left']`	வரிசையில் உள்ள இடங்களின் பட்டியலை வழங்குவதன் மூலம் ஃபால்பேக் இடங்களை வரையறுக்கவும் (விருப்பத்தின்படி). மேலும் தகவலுக்கு, பாப்பரின் நடத்தை ஆவணங்களைப் பார்க்கவும் .
`html`	பூலியன்	`false`	உதவிக்குறிப்பில் HTML ஐ அனுமதிக்கவும். உண்மை எனில், உதவிக்குறிப்பில் உள்ள HTML குறிச்சொற்கள் உதவிக்குறிப்பில் `title`வழங்கப்படும். தவறு எனில் `innerText`, DOM இல் உள்ளடக்கத்தைச் செருக சொத்து பயன்படுத்தப்படும். XSS தாக்குதல்களைப் பற்றி நீங்கள் கவலைப்பட்டால், உரையைப் பயன்படுத்தவும்.
`offset`	வரிசை, சரம், செயல்பாடு	`[0, 0]`	அதன் இலக்குடன் தொடர்புடைய உதவிக்குறிப்பின் ஆஃப்செட். காற்புள்ளியால் பிரிக்கப்பட்ட மதிப்புகளுடன் தரவு பண்புக்கூறுகளில் நீங்கள் ஒரு சரத்தை அனுப்பலாம் `data-bs-offset="10,20"`: ஆஃப்செட்டைத் தீர்மானிக்க ஒரு செயல்பாடு பயன்படுத்தப்படும்போது, அதன் முதல் வாதமாக பாப்பர் பிளேஸ்மென்ட், குறிப்பு மற்றும் பாப்பர் ரெக்ட்ஸ் ஆகியவற்றைக் கொண்ட ஒரு பொருளுடன் அது அழைக்கப்படுகிறது. தூண்டுதல் உறுப்பு DOM முனை இரண்டாவது வாதமாக அனுப்பப்பட்டது. செயல்பாடு இரண்டு எண்களைக் கொண்ட வரிசையை வழங்க வேண்டும்: சறுக்கல் , தூரம் . மேலும் தகவலுக்கு, பாப்பரின் ஆஃப்செட் டாக்ஸைப் பார்க்கவும் .
`placement`	சரம், செயல்பாடு	`'top'`	உதவிக்குறிப்பை எவ்வாறு நிலைநிறுத்துவது: தானாக, மேல், கீழ், இடது, வலது. குறிப்பிடப்பட்டால், அது `auto`உதவிக்குறிப்பை மாறும் வகையில் மாற்றியமைக்கும். இடத்தைத் தீர்மானிக்க ஒரு செயல்பாடு பயன்படுத்தப்படும்போது, அது டூல்டிப் DOM முனை அதன் முதல் வாதமாகவும், தூண்டுதல் உறுப்பு DOM முனை அதன் இரண்டாவது எனவும் அழைக்கப்படுகிறது. சூழல் உதவிக்குறிப்பு நிகழ்வில் அமைக்கப்பட்டுள்ளது `this`.
`popperConfig`	பூஜ்ய, பொருள், செயல்பாடு	`null`	பூட்ஸ்டார்ப்பின் இயல்புநிலை பாப்பர் கட்டமைப்பை மாற்ற, பாப்பரின் உள்ளமைவைப் பார்க்கவும் . பாப்பர் உள்ளமைவை உருவாக்க ஒரு செயல்பாடு பயன்படுத்தப்படும் போது, அது பூட்ஸ்டார்ப்பின் இயல்புநிலை பாப்பர் உள்ளமைவைக் கொண்ட ஒரு பொருளுடன் அழைக்கப்படுகிறது. இது உங்கள் சொந்த உள்ளமைவுடன் இயல்புநிலையைப் பயன்படுத்தவும் இணைக்கவும் உதவுகிறது. செயல்பாடு பாப்பருக்கான உள்ளமைவு பொருளைத் தர வேண்டும்.
`sanitize`	பூலியன்	`true`	சுத்தப்படுத்துதலை இயக்கவும் அல்லது முடக்கவும். செயல்படுத்தப்பட்டால் `'template'`, `'content'`மற்றும் `'title'`விருப்பங்கள் சுத்தப்படுத்தப்படும்.
`sanitizeFn`	பூஜ்ய, செயல்பாடு	`null`	இங்கே நீங்கள் உங்கள் சொந்த சுத்திகரிப்பு செயல்பாட்டை வழங்கலாம். சுத்திகரிப்பு செய்ய பிரத்யேக நூலகத்தைப் பயன்படுத்த விரும்பினால் இது பயனுள்ளதாக இருக்கும்.
`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'`மூலம் நிரல் ரீதியாக தூண்டப்படும் என்பதைக் குறிக்கிறது ; இந்த மதிப்பை வேறு எந்த தூண்டுதலுடனும் இணைக்க முடியாது. விசைப்பலகை மூலம் தூண்ட முடியாத டூல்டிப்களை அதன் சொந்தமாக விளைவித்து, அதே தகவலை விசைப்பலகை பயனர்களுக்கு தெரிவிப்பதற்கான மாற்று முறைகள் இருந்தால் மட்டுமே பயன்படுத்த வேண்டும்.`.tooltip('show').tooltip('hide').tooltip('toggle')'hover'`

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

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

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

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

முறைகள்

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

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

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

முறை	விளக்கம்
`disable`	ஒரு உறுப்பின் உதவிக்குறிப்பு காட்டப்படுவதற்கான திறனை நீக்குகிறது. உதவிக்குறிப்பை மீண்டும் இயக்கினால் மட்டுமே காண்பிக்க முடியும்.
`dispose`	ஒரு உறுப்பின் உதவிக்குறிப்பை மறைத்து அழிக்கிறது (DOM உறுப்பில் சேமிக்கப்பட்ட தரவை நீக்குகிறது). பிரதிநிதித்துவத்தைப் பயன்படுத்தும் உதவிக்குறிப்புகள் ( `selector`விருப்பத்தைப் பயன்படுத்தி உருவாக்கப்பட்டவை ) சந்ததி தூண்டுதல் கூறுகளில் தனித்தனியாக அழிக்கப்பட முடியாது.
`enable`	ஒரு தனிமத்தின் உதவிக்குறிப்பு காட்டப்படும் திறனை வழங்குகிறது. உதவிக்குறிப்புகள் இயல்பாகவே இயக்கப்படும்.
`getInstance`	DOM உறுப்புடன் தொடர்புடைய உதவிக்குறிப்பு நிகழ்வைப் பெற உங்களை அனுமதிக்கும் நிலையான முறை அல்லது அது துவக்கப்படாமல் இருந்தால் புதிய ஒன்றை உருவாக்கவும்.
`getOrCreateInstance`	DOM உறுப்புடன் தொடர்புடைய உதவிக்குறிப்பு நிகழ்வைப் பெற உங்களை அனுமதிக்கும் நிலையான முறை அல்லது அது துவக்கப்படாமல் இருந்தால் புதிய ஒன்றை உருவாக்கவும்.
`hide`	ஒரு உறுப்பின் உதவிக்குறிப்பை மறைக்கிறது. உதவிக்குறிப்பு உண்மையில் மறைக்கப்படுவதற்கு முன்பு அழைப்பாளருக்குத் திரும்பும் (அதாவது `hidden.bs.tooltip`நிகழ்வு நிகழும் முன்). இது உதவிக்குறிப்பின் "கையேடு" தூண்டுதலாகக் கருதப்படுகிறது.
`setContent`	உதவிக்குறிப்பின் உள்ளடக்கத்தை அதன் துவக்கத்திற்குப் பிறகு மாற்றுவதற்கான வழியை வழங்குகிறது.
`show`	ஒரு உறுப்பின் உதவிக்குறிப்பை வெளிப்படுத்துகிறது. உதவிக்குறிப்பு உண்மையில் காட்டப்படுவதற்கு முன்பு அழைப்பாளருக்குத் திரும்புகிறது (அதாவது `shown.bs.tooltip`நிகழ்வு நிகழும் முன்). இது உதவிக்குறிப்பின் "கையேடு" தூண்டுதலாகக் கருதப்படுகிறது. பூஜ்ஜிய நீள தலைப்புகள் கொண்ட உதவிக்குறிப்புகள் ஒருபோதும் காட்டப்படாது.
`toggle`	ஒரு உறுப்பின் உதவிக்குறிப்பை மாற்றுகிறது. உதவிக்குறிப்பு உண்மையில் காட்டப்படுவதற்கு அல்லது மறைக்கப்படுவதற்கு முன் அழைப்பாளருக்குத் திரும்பும் (அதாவது நிகழ்வு `shown.bs.tooltip`அல்லது `hidden.bs.tooltip`நிகழ்வு நிகழும் முன்). இது உதவிக்குறிப்பின் "கையேடு" தூண்டுதலாகக் கருதப்படுகிறது.
`toggleEnabled`	ஒரு உறுப்பின் உதவிக்குறிப்பு காட்டப்படும் அல்லது மறைக்கப்படுவதற்கான திறனை மாற்றுகிறது.
`update`	உறுப்பின் உதவிக்குறிப்பின் நிலையைப் புதுப்பிக்கிறது.

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

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

முறையானது setContentஒரு objectவாதத்தை ஏற்றுக்கொள்கிறது, இதில் ஒவ்வொரு சொத்து-விசையும் stringபாப்ஓவர் டெம்ப்ளேட்டிற்குள் செல்லுபடியாகும் தேர்வியாகும், மேலும் ஒவ்வொரு தொடர்புடைய சொத்து மதிப்பும் இருக்கலாம் string| element| function| null

நிகழ்வுகள்

நிகழ்வு	விளக்கம்
`hide.bs.tooltip`	`hide`நிகழ்வு முறை அழைக்கப்பட்டவுடன் இந்த நிகழ்வு உடனடியாக நீக்கப்படும் .
`hidden.bs.tooltip`	பாப்ஓவர் பயனரிடமிருந்து மறைக்கப்பட்டது��் (CSS மாற்றங்கள் முடியும் வரை காத்திருக்கும்) இந்த நிகழ்வு நீக்கப்படும்.
`inserted.bs.tooltip`	`show.bs.tooltip`DOM இல் டூல்டிப் டெம்ப்ளேட் சேர்க்கப்படும் போது, நிகழ்வுக்குப் பிறகு இந்த நிகழ்வு நீக்கப்படும் .
`show.bs.tooltip`	`show`நிகழ்வு முறை என்று அழைக்கப்படும் போது இந்த நிகழ்வு உடனடியாக சுடுகிறது .
`shown.bs.tooltip`	பாப்ஓவர் பயனருக்குத் தெரியும் போது இந்த நிகழ்வு நீக்கப்படும் (CSS மாற்றங்கள் முடிவடையும் வரை காத்திருக்கும்).

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

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

tooltip.hide()

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

கண்ணோட்டம்

எடுத்துக்காட்டுகள்

உதவிக்குறிப்புகளை இயக்கு

இணைப்புகளில் உதவிக்குறிப்புகள்

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

திசைகள்

CSS

மாறிகள்

சாஸ் மாறிகள்

பயன்பாடு

வழிதல் autoமற்றும்scroll

���ார்க்அப்

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

முடக்கப்பட்ட கூறுகள்

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

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

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

முறைகள்

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

நிகழ்வுகள்

வழிதல் `auto`மற்றும்`scroll`

��ார்க்அப்

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