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

స్థానిక శీర్షిక నిల్వ కోసం యానిమేషన్‌లు మరియు డేటా-అట్రిబ్యూట్‌ల కోసం 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 లోపల మూలకం కారణంగా టూల్‌టిప్‌లను ట్రిగ్గర్ చేయవచ్చు.

అదంతా తెలుసా? చాలా బాగుంది, కొన్ని ఉదాహరణలతో అవి ఎలా పని చేస్తాయో చూద్దాం.

ఉదాహరణ: ప్రతిచోటా టూల్‌టిప్‌లను ప్రారంభించండి

data-toggleపేజీలోని అన్ని టూల్‌టిప్‌లను ప్రారంభించడానికి ఒక మార్గం వాటి లక్షణం ద్వారా వాటిని ఎంచుకోవడం :

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

ఉదాహరణలు

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

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

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

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

మార్కప్

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

<!-- 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="".

పద్ధతులు

$().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')

ఈవెంట్స్

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})