ప్రధాన కంటెంట్‌కి దాటవేయి డాక్స్ నావిగేషన్‌కు దాటవేయి
in English

ఉపకరణ చిట్కాలు

యానిమేషన్‌ల కోసం CSS3ని ఉపయోగించి CSS మరియు JavaScriptతో అనుకూల బూట్‌స్ట్రాప్ టూల్‌టిప్‌లను జోడించడానికి డాక్యుమెంటేషన్ మరియు ఉదాహరణలు మరియు స్థానిక శీర్షిక నిల్వ కోసం డేటా-బిఎస్-లక్షణాలు.

ఈ పేజీలో

అవలోకనం

టూల్‌టిప్ ప్లగిన్‌ని ఉపయోగిస్తున్నప్పుడు తెలుసుకోవలసిన విషయాలు:

  • టూల్‌టిప్‌లు పొజిషనింగ్ కోసం 3వ పార్టీ లైబ్రరీ పాపర్‌పై ఆధారపడతాయి . మీరు తప్పనిసరిగా bootstrap.jsకి ముందు popper.min.jsbootstrap.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లో బూట్‌స్ట్రాప్‌ని ఉపయోగిస్తున్నప్పుడు దిశలు ప్రతిబింబించబడతాయి.

<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, కానీ ఇప్పటికీ అసలు ప్లేస్‌మెంట్ యొక్క పొజిషనింగ్‌ను అలాగే ఉంచుతుంది. దీన్ని పరిష్కరించడానికి , డిఫాల్ట్ విలువను భర్తీ చేయడానికి boundaryఎంపికను (ఆప్షన్‌ని ఉపయోగించి ఫ్లిప్ మాడిఫైయర్ కోసం ) ఏదైనా HTMLElementకి సెట్ చేయండి, , వంటి :popperConfig'clippingParents'document.body

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

మార్కప్

టూల్‌టిప్‌కు అవసరమైన మార్కప్ అనేది ఒక dataలక్షణం మాత్రమే మరియు titleమీరు టూల్‌టిప్‌ను కలిగి ఉండాలనుకుంటున్న HTML మూలకం. టూల్‌టిప్ యొక్క జనరేట్ మార్కప్ చాలా సులభం, అయితే దీనికి స్థానం అవసరం (డిఫాల్ట్‌గా, 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="". డేటా అట్రిబ్యూట్‌ల ద్వారా ఆప్షన్‌లను పాస్ చేస్తున్నప్పుడు ఆప్షన్ పేరు కేస్ రకాన్ని కామెల్‌కేస్ నుండి కబాబ్-కేస్‌కి మార్చినట్లు నిర్ధారించుకోండి. ఉదాహరణకు, ఉపయోగించడానికి బదులుగా 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 డాక్స్ చూడండి .
customClass స్ట్రింగ్ | ఫంక్షన్ ''

చూపబడినప్పుడు టూల్‌టిప్‌కు తరగతులను జోడించండి. టెంప్లేట్‌లో పేర్కొన్న ఏవైనా తరగతులకు అదనంగా ఈ తరగతులు జోడించబడతాయని గుర్తుంచుకోండి. బహుళ తరగతులను జోడించడానికి, వాటిని ఖాళీలతో వేరు చేయండి: 'class-1 class-2'.

మీరు అదనపు తరగతి పేర్లను కలిగి ఉన్న ఒకే స్ట్రింగ్‌ను తిరిగి పంపే ఫంక్షన్‌ను కూడా పాస్ చేయవచ్చు.
sanitize బూలియన్ true శానిటైజేషన్‌ను ప్రారంభించండి లేదా నిలిపివేయండి. సక్రియం చేయబడితే 'template'మరియు 'title'ఎంపికలు శుభ్రపరచబడతాయి. మా జావాస్క్రిప్ట్ డాక్యుమెంటేషన్‌లో శానిటైజర్ విభాగాన్ని చూడండి .
allowList వస్తువు డిఫాల్ట్ విలువ అనుమతించబడిన లక్షణాలు మరియు ట్యాగ్‌లను కలిగి ఉన్న వస్తువు
sanitizeFn శూన్యం | ఫంక్షన్ null ఇక్కడ మీరు మీ స్వంత శానిటైజ్ ఫంక్షన్‌ను సరఫరా చేయవచ్చు. మీరు శానిటైజేషన్ చేయడానికి ప్రత్యేక లైబ్రరీని ఉపయోగించాలనుకుంటే ఇది ఉపయోగకరంగా ఉంటుంది.
offset శ్రేణి | స్ట్రింగ్ | ఫంక్షన్ [0, 0]

టూల్‌టిప్ యొక్క లక్ష్యానికి సంబంధించి ఆఫ్‌సెట్. మీరు కామాతో వేరు చేయబడిన విలువలతో డేటా లక్షణాలలో స్ట్రింగ్‌ను పాస్ చేయవచ్చు:data-bs-offset="10,20"

ఆఫ్‌సెట్‌ను నిర్ణయించడానికి ఒక ఫంక్షన్‌ను ఉపయోగించినప్పుడు, పాపర్ ప్లేస్‌మెంట్, రిఫరెన్స్ మరియు పాపర్ రెక్ట్‌లను దాని మొదటి ఆర్గ్యుమెంట్‌గా కలిగి ఉన్న వస్తువుతో పిలుస్తారు. ట్రిగ్గరింగ్ ఎలిమెంట్ DOM నోడ్ రెండవ ఆర్గ్యుమెంట్‌గా పాస్ చేయబడింది. ఫంక్షన్ తప్పనిసరిగా రెండు సంఖ్యలతో కూడిన శ్రేణిని అందించాలి: .[skidding, distance]

మరింత సమాచారం కోసం Popper యొక్క ఆఫ్‌సెట్ డాక్స్ చూడండి .
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.tooltipటూల్‌టిప్ టెంప్లేట్ DOMకి జోడించబడినప్పుడు ఈవెంట్ తర్వాత ఈ ఈవెంట్ తొలగించబడుతుంది . 
var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)

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

tooltip.hide()