મુખ્ય સામગ્રી પર જાઓ ડૉક્સ નેવિગેશન પર જાઓ
in English

ટૂલટિપ્સ

સ્થાનિક ટાઇટલ સ્ટોરેજ માટે એનિમેશન અને ડેટા-બીએસ-એટ્રિબ્યુટ્સ માટે CSS3 નો ઉપયોગ કરીને CSS અને JavaScript સાથે કસ્ટમ બુટસ્ટ્રેપ ટૂલટિપ્સ ઉમેરવા માટે દસ્તાવેજીકરણ અને ઉદાહરણો.

ઝાંખી

ટૂલટિપ પ્લગઇનનો ઉપયોગ કરતી વખતે જાણવા જેવી બાબતો:

  • ટૂલટિપ્સ પોઝિશનિંગ માટે 3જી પાર્ટી લાઇબ્રેરી પોપર પર આધાર રાખે છે . તમારે bootstrap.js પહેલાં popper.min.js શામેલ કરવું આવશ્યક છે અથવા ટૂલટિપ્સ કાર્ય કરવા માટે ક્રમમાં Popper સમાવે છે bootstrap.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;

ઉપયોગ

ટૂલટિપ પ્લગઇન માંગ પર સામગ્રી અને માર્કઅપ જનરેટ કરે છે અને ડિફૉલ્ટ રૂપે તેમના ટ્રિગર ઘટક પછી ટૂલટિપ્સ મૂકે છે.

JavaScript દ્વારા ટૂલટિપને ટ્રિગર કરો:

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)
ઓવરફ્લો autoઅનેscroll

જ્યારે પેરેન્ટ કન્ટેનર પાસે અમારી , overflow: autoઅથવા તે overflow: scrollગમે ત્યારે ટૂલટિપ સ્થિતિ આપમેળે બદલવાનો પ્રયાસ કરે છે .table-responsive, પરંતુ તેમ છતાં મૂળ પ્લેસમેન્ટની સ્થિતિ જાળવી રાખે છે. આને ઉકેલવા માટે , ડિફૉલ્ટ મૂલ્યને ઓવરરાઇડ કરવા માટે કોઈપણ HTMLElement પર boundaryવિકલ્પ (વિકલ્પનો ઉપયોગ કરીને ફ્લિપ મોડિફાયર માટે ) સેટ કરો , જેમ કે :popperConfig'clippingParents'document.body

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

માર્કઅપ

ટૂલટિપ માટે જરૂરી માર્કઅપ માત્ર એક dataવિશેષતા છે અને titleHTML એલિમેન્ટ પર તમે ટૂલટિપ રાખવા માંગો છો. ટૂલટિપનું જનરેટ કરેલ માર્કઅપ એકદમ સરળ છે, જો કે તેને પોઝિશનની જરૂર છે (ડિફૉલ્ટ રૂપે, topપ્લગઇન દ્વારા સેટ કરેલ છે).

કીબોર્ડ અને સહાયક ટેક્નોલોજી વપરાશકર્તાઓ માટે ટૂલટિપ્સ કાર્ય કરે છે

તમારે ફક્ત HTML ઘટકોમાં જ ટૂલટિપ્સ ઉમેરવી જોઈએ જે પરંપરાગત રીતે કીબોર્ડ-ફોકસેબલ અને ઇન્ટરેક્ટિવ હોય (જેમ કે લિંક્સ અથવા ફોર્મ નિયંત્રણો). જોકે એટ્રિબ્યુટ ઉમેરીને મનસ્વી HTML તત્વો (જેમ કે <span>s) ને ફોકસેબલ બનાવી શકાય છે 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>

વિકલ્પો

વિકલ્પો ડેટા વિશેષતાઓ અથવા JavaScript દ્વારા પસાર કરી શકાય છે. ડેટા એટ્રિબ્યુટ્સ માટે, વિકલ્પ નામને 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રેન્ડર કરવામાં આવશે. જો ખોટું હોય, તો innerTextપ્રોપર્ટીનો ઉપયોગ DOM માં સામગ્રી દાખલ કરવા માટે કરવામાં આવશે.

જો તમે 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 docs નો સંદર્ભ લો .
customClass શબ્દમાળા | કાર્ય ''

જ્યારે તે બતાવવામાં આવે ત્યારે ટૂલટિપમાં વર્ગો ઉમેરો. નોંધ કરો કે આ વર્ગો નમૂનામાં ઉલ્લેખિત કોઈપણ વર્ગો ઉપરાંત ઉમેરવામાં આવશે. બહુવિધ વર્ગો ઉમેરવા માટે, તેમને જગ્યાઓ સાથે અલગ કરો: 'class-1 class-2'.

તમે એક ફંક્શન પણ પાસ કરી શકો છો કે જેમાં વધારાના વર્ગના નામો ધરાવતી સિંગલ સ્ટ્રિંગ પરત કરવી જોઈએ.

sanitize બુલિયન true સેનિટાઇઝેશનને સક્ષમ અથવા અક્ષમ કરો. જો સક્રિય થાય 'template'અને 'title'વિકલ્પોને સેનિટાઇઝ કરવામાં આવશે. અમારા JavaScript દસ્તાવેજીકરણમાં સેનિટાઇઝર વિભાગ જુઓ .
allowList પદાર્થ ડિફૉલ્ટ મૂલ્ય ઑબ્જેક્ટ જેમાં માન્ય લક્ષણો અને ટૅગ્સ શામેલ છે
sanitizeFn નલ | કાર્ય null અહીં તમે તમારું પોતાનું સેનિટાઇઝ ફંક્શન આપી શકો છો. જો તમે સેનિટાઈઝેશન કરવા માટે સમર્પિત પુસ્તકાલયનો ઉપયોગ કરવાનું પસંદ કરો તો આ ઉપયોગી થઈ શકે છે.
offset એરે | શબ્દમાળા | કાર્ય [0, 0]

તેના લક્ષ્યની તુલનામાં ટૂલટિપની ઑફસેટ. તમે અલ્પવિરામથી વિભાજિત મૂલ્યો સાથે ડેટા વિશેષતાઓમાં સ્ટ્રિંગ પસાર કરી શકો છો જેમ કે:data-bs-offset="10,20"

જ્યારે ઑફસેટ નક્કી કરવા માટે ફંક્શનનો ઉપયોગ કરવામાં આવે છે, ત્યારે તેને પોપર પ્લેસમેન્ટ, રેફરન્સ ધરાવતા ઑબ્જેક્ટ સાથે બોલાવવામાં આવે છે અને પોપર તેની પ્રથમ દલીલ તરીકે રેક્ટ કરે છે. ટ્રિગરિંગ એલિમેન્ટ DOM નોડ બીજી દલીલ તરીકે પસાર થાય છે. ફંક્શનને બે સંખ્યાઓ સાથે એરે પરત કરવું આવશ્યક છે: .[skidding, distance]

વધુ માહિતી માટે પોપરના ઓફસેટ દસ્તાવેજોનો સંદર્ભ લો .

popperConfig નલ | પદાર્થ | કાર્ય null

બુટસ્ટ્રેપના ડિફોલ્ટ પોપર રૂપરેખાને બદલવા માટે, પોપરનું રૂપરેખાંકન જુઓ .

જ્યારે પોપર કન્ફિગરેશન બનાવવા માટે ફંક્શનનો ઉપયોગ કરવામાં આવે છે, ત્યારે તેને એવા ઑબ્જેક્ટ સાથે બોલાવવામાં આવે છે જેમાં બુટસ્ટ્રેપનું ડિફોલ્ટ પોપર કન્ફિગરેશન હોય છે. તે તમને તમારા પોતાના રૂપરેખાંકન સાથે ડિફોલ્ટનો ઉપયોગ કરવામાં અને મર્જ કરવામાં મદદ કરે છે. ફંક્શને પોપર માટે રૂપરેખાંકન ઑબ્જેક્ટ પરત કરવું આવશ્યક છે.

વ્યક્તિગત ટૂલટિપ્સ માટે ડેટા લક્ષણો

વ્યક્તિગત ટૂલટિપ્સ માટેના વિકલ્પો વૈકલ્પિક રીતે ડેટા એટ્રિબ્યુટ્સના ઉપયોગ દ્વારા સ્પષ્ટ કરી શકાય છે, જેમ ઉપર સમજાવ્યું છે.

સાથે ફંક્શનનો ઉપયોગ કરવોpopperConfig

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

પદ્ધતિઓ

અસુમેળ પદ્ધતિઓ અને સંક્રમણો

બધી API પદ્ધતિઓ અસુમેળ છે અને સંક્રમણ શરૂ કરે છે . સંક્રમણ શરૂ થતાંની સાથે જ તેઓ કૉલર પાસે પાછા ફરે છે પરંતુ તે સમાપ્ત થાય તે પહેલાં . વધુમાં, સંક્રમણ ઘટક પર પદ્ધતિ કૉલ અવગણવામાં આવશે .

વધુ માહિતી માટે અમારા JavaScript દસ્તાવેજીકરણ જુઓ .

બતાવો

તત્વની ટૂલટિપ દર્શાવે છે. ટૂલટિપ વાસ્તવમાં બતાવવામાં આવે તે પહેલાં (એટલે ​​કે 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()

ટૉગલ સક્ષમ

એલિમેન્ટની ટૂલટિપ બતાવવાની અથવા છુપાવવાની ક્ષમતાને ટૉગલ કરે છે.

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