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()
})

ఉదాహరణలు

టూల్‌టిప్‌లను చూడటానికి క్రింది లింక్‌లపై హోవర్ చేయండి:

టైట్ ప్యాంటు నెక్స్ట్ లెవల్ కెఫియే మీరు వాటి గురించి విని ఉండకపోవచ్చు. ఫోటో బూత్ గడ్డం ముడి డెనిమ్ లెటర్‌ప్రెస్ వేగన్ మెసెంజర్ బ్యాగ్ స్టంప్‌టౌన్. ఫామ్-టు-టేబుల్ సీటాన్, mcsweeney యొక్క ఫిక్సీ సస్టైనబుల్ క్వినోవా 8-బిట్ అమెరికన్ దుస్తులు టెర్రీ రిచర్డ్‌సన్ వినైల్ చాంబ్రేని కలిగి ఉన్నాయి . బార్డ్ స్టంప్‌టౌన్, కార్డిగాన్స్ బాన్ మి లోమో థండర్‌క్యాట్స్. టోఫు బయోడీజిల్ విలియమ్స్‌బర్గ్ మార్ఫా, ఫోర్ లోకో మెక్‌స్వీనీస్ క్లీన్స్ శాకాహారి చాంబ్రే. నిజంగా వ్యంగ్య కళాకారుడు సంసార కీటార్ , సీన్‌స్టర్ ఫార్మ్-టు-టేబుల్ బ్యాంక్సీ ఆస్టిన్ ట్విట్టర్ హ్యాండిల్ ఫ్రీగాన్ క్రేడ్ రా డెనిమ్ సింగిల్-ఆరిజిన్ కాఫీ వైరల్.

నాలుగు టూల్‌టిప్‌ల దిశలను చూడటానికి క్రింది బటన్‌లపై హోవర్ చేయండి: ఎగువ, కుడి, దిగువ మరియు ఎడమ.

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

వాడుక

టూల్‌టిప్ ప్లగ్ఇన్ డిమాండ్‌పై కంటెంట్ మరియు మార్కప్‌ను ఉత్పత్తి చేస్తుంది మరియు డిఫాల్ట్‌గా టూల్‌టిప్‌లను వాటి ట్రిగ్గర్ ఎలిమెంట్ తర్వాత ఉంచుతుంది.

జావాస్క్రిప్ట్ ద్వారా టూల్‌టిప్‌ను ట్రిగ్గర్ చేయండి:

$('#example').tooltip(options)
ఓవర్ఫ్లో autoమరియుscroll

overflow: autoటూల్‌టిప్ స్థానం మాతృ కంటైనర్‌లో ఉన్నప్పుడు లేదా overflow: scrollమా ఇష్టం ఉన్నప్పుడు స్వయంచాలకంగా మారడానికి ప్రయత్నిస్తుంది .table-responsive, కానీ ఇప్పటికీ అసలు ప్లేస్‌మెంట్ యొక్క పొజిషనింగ్‌ను అలాగే ఉంచుతుంది. పరిష్కరించడానికి, boundaryడిఫాల్ట్ విలువ కాకుండా ఏదైనా ఎంపికను సెట్ చేయండి, 'scrollParent', వంటి 'window':

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

మార్కప్

టూల్‌టిప్‌కు అవసరమైన మార్కప్ అనేది ఒక dataలక్షణం మాత్రమే మరియు titleమీరు టూల్‌టిప్‌ను కలిగి ఉండాలనుకుంటున్న HTML మూలకం. టూల్‌టిప్ యొక్క జనరేట్ మార్కప్ చాలా సులభం, అయితే దీనికి స్థానం అవసరం (డిఫాల్ట్‌గా, topప్లగిన్ ద్వారా సెట్ చేయబడింది).

కీబోర్డ్ మరియు సహాయక సాంకేతిక వినియోగదారుల కోసం టూల్‌టిప్‌లు పని చేస్తాయి

మీరు సాంప్రదాయకంగా కీబోర్డ్-ఫోకస్ చేయగల మరియు ఇంటరాక్టివ్ (లింక్‌లు లేదా ఫారమ్ నియంత్రణలు వంటివి) HTML మూలకాలకు మాత్రమే టూల్‌టిప్‌లను జోడించాలి. లక్షణాన్ని జోడించడం ద్వారా ఏకపక్ష HTML మూలకాలను ( <span>లు వంటివి) ఫోకస్ చేయగలిగినప్పటికీ, ఇది 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ఇంటరాక్టివ్ కాదు, అంటే వినియోగదారులు టూల్‌టిప్ (లేదా పాప్‌ఓవర్)ని ట్రిగ్గర్ చేయడానికి వాటిని ఫోకస్ చేయలేరు, హోవర్ చేయలేరు లేదా క్లిక్ చేయలేరు. ప్రత్యామ్నాయంగా, మీరు రేపర్ నుండి టూల్‌టిప్‌ను ట్రిగ్గర్ చేయాలనుకుంటున్నారు <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>

ఎంపికలు

ఎంపికలు డేటా లక్షణాలు లేదా జావాస్క్రిప్ట్ ద్వారా పంపబడతాయి. డేటా అట్రిబ్యూట్‌ల కోసం, ఎంపిక పేరును data-, లో వలె జత చేయండి data-animation="".

భద్రతా కారణాల దృష్ట్యా డేటా గుణాలను ఉపయోగించి sanitize, sanitizeFnమరియు whiteListఎంపికలు అందించబడవని గుర్తుంచుకోండి.

పేరు టైప్ చేయండి డిఫాల్ట్ వివరణ
యానిమేషన్ బూలియన్ నిజం టూల్‌టిప్‌కు CSS ఫేడ్ ట్రాన్సిషన్‌ని వర్తింపజేయండి
కంటైనర్ స్ట్రింగ్ | మూలకం | తప్పుడు తప్పుడు

టూల్‌టిప్‌ను నిర్దిష్ట మూలకానికి జోడిస్తుంది. ఉదాహరణ: container: 'body'. ఈ ఐచ్ఛికం ముఖ్యంగా ఉపయోగకరంగా ఉంటుంది, ఇది టూల్‌టిప్‌ను ట్రిగ్గరింగ్ ఎలిమెంట్‌కు సమీపంలో పత్రం యొక్క ప్రవాహంలో ఉంచడానికి మిమ్మల్ని అనుమతిస్తుంది - ఇది విండో పునఃపరిమాణం సమయంలో ట్రిగ్గరింగ్ ఎలిమెంట్ నుండి టూల్‌టిప్ తేలకుండా చేస్తుంది.
ఆలస్యం సంఖ్య | వస్తువు 0

టూల్‌టిప్ (ms)ని చూపడం మరియు దాచడం ఆలస్యం - మాన్యువల్ ట్రిగ్గర్ రకానికి వర్తించదు

నంబర్ సరఫరా చేయబడితే, దాచు/చూపడం రెండింటికీ ఆలస్యం వర్తించబడుతుంది

వస్తువు నిర్మాణం:delay: { "show": 500, "hide": 100 }
html బూలియన్ తప్పుడు

టూల్‌టిప్‌లో HTMLని అనుమతించండి.

ఒప్పు అయితే, టూల్‌టిప్‌లోని HTML ట్యాగ్‌లు టూల్‌టిప్‌లో titleరెండర్ చేయబడతాయి. తప్పు అయితే, textDOMలో కంటెంట్‌ని చొప్పించడానికి j క్వెరీ పద్ధతి ఉపయోగించబడుతుంది.

మీరు 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

టూల్‌టిప్ యొక్క లక్ష్యానికి సంబంధించి ఆఫ్‌సెట్.

ఆఫ్‌సెట్‌ను నిర్ణయించడానికి ఒక ఫంక్షన్‌ను ఉపయోగించినప్పుడు, ఆఫ్‌సెట్ డేటాను దాని మొదటి ఆర్గ్యుమెంట్‌గా కలిగి ఉన్న ఆబ్జెక్ట్‌తో పిలుస్తారు. ఫంక్షన్ తప్పనిసరిగా అదే నిర్మాణంతో ఒక వస్తువును తిరిగి ఇవ్వాలి. ట్రిగ్గరింగ్ ఎలిమెంట్ DOM నోడ్ రెండవ ఆర్గ్యుమెంట్‌గా పాస్ చేయబడింది.

మరింత సమాచారం కోసం Popper.js ఆఫ్‌సెట్ డాక్స్‌ని చూడండి .
ఫాల్‌బ్యాక్ ప్లేస్‌మెంట్ స్ట్రింగ్ | అమరిక 'ఫ్లిప్' ఫాల్‌బ్యాక్‌లో పాపర్ ఏ స్థానాన్ని ఉపయోగిస్తుందో పేర్కొనడానికి అనుమతించండి. మరింత సమాచారం కోసం Popper.js ప్రవర్తన పత్రాలను చూడండి
సరిహద్దు స్ట్రింగ్ | మూలకం 'స్క్రోల్ పేరెంట్' టూల్‌టిప్ యొక్క ఓవర్‌ఫ్లో పరిమితి సరిహద్దు. 'viewport', 'window', 'scrollParent', లేదా HTMLElement సూచన (జావాస్క్రిప్ట్ మాత్రమే) విలువలను అంగీకరిస్తుంది . మరింత సమాచారం కోసం Popper.js's preventOverflow డాక్స్‌ని చూడండి .
శుభ్రపరచు బూలియన్ నిజం శానిటైజేషన్‌ను ప్రారంభించండి లేదా నిలిపివేయండి. సక్రియం చేయబడితే 'template'మరియు 'title'ఎంపికలు శుభ్రపరచబడతాయి.
తెల్లజాబితా వస్తువు డిఫాల్ట్ విలువ అనుమతించబడిన లక్షణాలు మరియు ట్యాగ్‌లను కలిగి ఉన్న వస్తువు
sanitizeFn శూన్యం | ఫంక్షన్ శూన్య ఇక్కడ మీరు మీ స్వంత శానిటైజ్ ఫంక్షన్‌ను సరఫరా చేయవచ్చు. మీరు శానిటైజేషన్ చేయడానికి ప్రత్యేక లైబ్రరీని ఉపయోగించాలనుకుంటే ఇది ఉపయోగకరంగా ఉంటుంది.
popperConfig శూన్యం | వస్తువు శూన్య Bootstrap యొక్క డిఫాల్ట్ Popper.js కాన్ఫిగరేషన్‌ని మార్చడానికి, Popper.js కాన్ఫిగరేషన్ చూడండి

వ్యక్తిగత టూల్‌టిప్‌ల కోసం డేటా లక్షణాలు

పైన వివరించిన విధంగా వ్యక్తిగత టూల్‌టిప్‌ల కోసం ఎంపికలు ప్రత్యామ్నాయంగా డేటా అట్రిబ్యూట్‌లను ఉపయోగించడం ద్వారా పేర్కొనవచ్చు.

పద్ధతులు

అసమకాలిక పద్ధతులు మరియు పరివర్తనాలు

అన్ని API పద్ధతులు అసమకాలికమైనవి మరియు పరివర్తనను ప్రారంభిస్తాయి . వారు పరివర్తన ప్రారంభమైన వెంటనే కానీ అది ముగిసేలోపు కాలర్ వద్దకు తిరిగి వస్తారు . అదనంగా, పరివర్తన భాగంపై పద్ధతి కాల్ విస్మరించబడుతుంది .

మరింత సమాచారం కోసం మా జావాస్క్రిప్ట్ డాక్యుమెంటేషన్ చూడండి .

$().tooltip(options)

ఎలిమెంట్ సేకరణకు టూల్‌టిప్ హ్యాండ్లర్‌ను జోడిస్తుంది.

.tooltip('show')

మూలకం యొక్క టూల్‌టిప్‌ను వెల్లడిస్తుంది. టూల్‌టిప్ వాస్తవంగా చూపబడక ముందే కాలర్‌కి తిరిగి వస్తుంది (అంటే shown.bs.tooltipఈవెంట్ జరగడానికి ముందు). ఇది టూల్‌టిప్ యొక్క "మాన్యువల్" ట్రిగ్గరింగ్‌గా పరిగణించబడుతుంది. సున్నా-పొడవు శీర్షికలతో టూల్‌టిప్‌లు ఎప్పుడూ ప్రదర్శించబడవు.

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

.tooltip('hide')

మూలకం యొక్క ఉపకరణ చిట్కాను దాచిపెడుతుంది. టూల్‌టిప్ వాస్తవంగా దాచబడక ముందే కాలర్‌కి తిరిగి వస్తుంది (అంటే hidden.bs.tooltipఈవెంట్ జరగడానికి ముందు). ఇది టూల్‌టిప్ యొక్క "మాన్యువల్" ట్రిగ్గరింగ్‌గా పరిగణించబడుతుంది.

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

.tooltip('toggle')

మూలకం యొక్క టూల్‌టిప్‌ను టోగుల్ చేస్తుంది. టూల్‌టిప్ వాస్తవంగా చూపబడటానికి లేదా దాచబడటానికి ముందే కాలర్‌కి తిరిగి వస్తుంది (అంటే shown.bs.tooltipలేదా hidden.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.టూల్‌టిప్ ఇన్‌స్టెన్స్ మెథడ్‌ని పిలిచినప్పుడు ఈ ఈవెంట్ వెంటనే ఫైర్ అవుతుంది show.
చూపబడింది.bs.టూల్‌టిప్ టూల్‌టిప్ వినియోగదారుకు కనిపించేలా చేసినప్పుడు ఈ ఈవెంట్ తొలగించబడుతుంది (CSS పరివర్తనలు పూర్తయ్యే వరకు వేచి ఉంటుంది).
hide.bs.టూల్‌టిప్ hideఉదాహరణ పద్ధతిని పిలిచినప్పుడు ఈ ఈవెంట్ వెంటనే తొలగించబడుతుంది .
దాచిన.bs.టూల్‌టిప్ టూల్‌టిప్ వినియోగదారు నుండి దాచబడటం పూర్తయినప్పుడు ఈ ఈవెంట్ తొలగించబడుతుంది (CSS పరివర్తనలు పూర్తయ్యే వరకు వేచి ఉంటుంది).
inserted.bs.tooltip show.bs.tooltipటూల్‌టిప్ టెంప్లేట్ DOMకి జోడించబడినప్పుడు ఈవెంట్ తర్వాత ఈ ఈవెంట్ తొలగించబడుతుంది . 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})