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

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

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

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

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

Methods

$().tooltip(options)

Attaches a tooltip handler to an element collection.

.tooltip('show')

Reveals an element’s tooltip. Returns to the caller before the tooltip has actually been shown (i.e. before the shown.bs.tooltip event occurs). This is considered a “manual” triggering of the tooltip. Tooltips with zero-length titles are never displayed.

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

.tooltip('hide')

Hides an element’s tooltip. Returns to the caller before the tooltip has actually been hidden (i.e. before the hidden.bs.tooltip event occurs). This is considered a “manual” triggering of the tooltip.

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

.tooltip('toggle')

Toggles an element’s tooltip. Returns to the caller before the tooltip has actually been shown or hidden (i.e. before the shown.bs.tooltip or hidden.bs.tooltip event occurs). This is considered a “manual” triggering of the tooltip.

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

.tooltip('dispose')

Hides and destroys an element’s tooltip. Tooltips that use delegation (which are created using the selector option) cannot be individually destroyed on descendant trigger elements.

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

.tooltip('enable')

Gives an element’s tooltip the ability to be shown. Tooltips are enabled by default.

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

.tooltip('disable')

Removes the ability for an element’s tooltip to be shown. The tooltip will only be able to be shown if it is re-enabled.

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

.tooltip('toggleEnabled')

Toggles the ability for an element’s tooltip to be shown or hidden.

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

.tooltip('update')

Updates the position of an element’s tooltip.

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

Events

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