in English

ટૂલટિપ્સ

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

ઝાંખી

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

  • ટૂલટિપ્સ પોઝિશનિંગ માટે 3જી પાર્ટી લાઇબ્રેરી પોપર પર આધાર રાખે છે . તમારે bootstrap.js પહેલાં popper.min.js શામેલ કરવું આવશ્યક છે અથવા ટૂલટિપ્સ કાર્ય કરવા માટે ક્રમમાં Popper સમાવે છે bootstrap.bundle.min.js/ ઉપયોગ કરો!bootstrap.bundle.js
  • જો તમે સ્ત્રોતમાંથી અમારી JavaScript બનાવી રહ્યાં છો, તો તેને જરૂરીutil.js છે .
  • ટૂલટિપ્સ પ્રદર્શનના કારણોસર પસંદ કરવામાં આવે છે, તેથી તમારે તેમને જાતે જ પ્રારંભ કરવું આવશ્યક છે .
  • શૂન્ય-લંબાઈના શીર્ષકો સાથેની ટૂલટિપ્સ ક્યારેય પ્રદર્શિત થતી નથી.
  • container: 'body'વધુ જટિલ ઘટકો (જેમ કે અમારા ઇનપુટ જૂથો, બટન જૂથો, વગેરે) માં રેન્ડરિંગ સમસ્યાઓ ટાળવા માટે સ્પષ્ટ કરો .
  • છુપાયેલા તત્વો પર ટ્રિગરિંગ ટૂલટિપ્સ કામ કરશે નહીં.
  • રેપર એલિમેન્ટ પર .disabledઅથવા તત્વો માટે ટૂલટિપ્સ ટ્રિગર થવી આવશ્યક છે.disabled
  • જ્યારે બહુવિધ રેખાઓ સુધી ફેલાયેલી હાયપરલિંક્સથી ટ્રિગર થાય છે, ત્યારે ટૂલટિપ્સ કેન્દ્રિત કરવામાં આવશે. આ વર્તનને ટાળવા માટે white-space: nowrap;તમારા s નો ઉપયોગ કરો.<a>
  • ટૂલટિપ્સ તેમના અનુરૂપ ઘટકોને DOM માંથી દૂર કરવામાં આવે તે પહેલાં છુપાયેલ હોવી આવશ્યક છે.
  • શેડો DOM ની અંદરના તત્વને કારણે ટૂલટિપ્સ ટ્રિગર થઈ શકે છે.
ડિફૉલ્ટ રૂપે, આ ​​ઘટક બિલ્ટ-ઇન કન્ટેન્ટ સેનિટાઇઝરનો ઉપયોગ કરે છે, જે સ્પષ્ટપણે મંજૂર ન હોય તેવા કોઈપણ HTML ઘટકોને બહાર કાઢે છે. વધુ વિગતો માટે અમારા JavaScript દસ્તાવેજીકરણમાં સેનિટાઈઝર વિભાગ જુઓ .
આ ઘટકની એનિમેશન અસર prefers-reduced-motionમીડિયા ક્વેરી પર આધારિત છે. અમારા ઍક્સેસિબિલિટી દસ્તાવેજીકરણનો ઘટાડો ગતિ વિભાગ જુઓ .

તે બધું મળ્યું? સરસ, ચાલો જોઈએ કે તેઓ કેટલાક ઉદાહરણો સાથે કેવી રીતે કાર્ય કરે છે.

ઉદાહરણ: દરેક જગ્યાએ ટૂલટિપ્સ સક્ષમ કરો

પૃષ્ઠ પરની તમામ ટૂલટિપ્સને આરંભ કરવાની એક રીત એ છે કે તેમને તેમની 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>

ઉપયોગ

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

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

$('#example').tooltip(options)
ઓવરફ્લો autoઅનેscroll

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

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

માર્કઅપ

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

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

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

વિકલ્પો

વિકલ્પો ડેટા વિશેષતાઓ અથવા JavaScript દ્વારા પસાર કરી શકાય છે. ડેટા એટ્રિબ્યુટ્સ માટે, વિકલ્પ નામને data-, જેમ કે માં ઉમેરો data-animation="".

નોંધ કરો કે સુરક્ષા કારણોસર sanitize, sanitizeFnઅને whiteListવિકલ્પો ડેટા લક્ષણોનો ઉપયોગ કરીને પૂરા પાડી શકાતા નથી.
નામ પ્રકાર ડિફૉલ્ટ વર્ણન
એનિમેશન બુલિયન સાચું ટૂલટિપ પર CSS ફેડ ટ્રાન્ઝિશન લાગુ કરો
કન્ટેનર શબ્દમાળા | તત્વ | ખોટું ખોટું

ચોક્કસ તત્વ સાથે ટૂલટિપ જોડે છે. ઉદાહરણ container: 'body':. આ વિકલ્પ ખાસ કરીને ઉપયોગી છે કારણ કે તે તમને ટ્રિગરિંગ એલિમેન્ટની નજીકના દસ્તાવેજના પ્રવાહમાં ટૂલટિપને સ્થાન આપવા માટે પરવાનગી આપે છે - જે વિન્ડો રિસાઇઝ દરમિયાન ટ્રિગરિંગ એલિમેન્ટથી ટૂલટિપને તરતી અટકાવશે.
વિલંબ નંબર | પદાર્થ 0

ટૂલટિપ (ms) બતાવવામાં અને છુપાવવામાં વિલંબ - મેન્યુઅલ ટ્રિગર પ્રકાર પર લાગુ થતો નથી

જો નંબર પૂરો પાડવામાં આવે છે, તો છુપાવો/શો બંને માટે વિલંબ લાગુ પડે છે

ઑબ્જેક્ટ માળખું છે:delay: { "show": 500, "hide": 100 }
html બુલિયન ખોટું

ટૂલટીપમાં HTML ને મંજૂરી આપો.

જો સાચું હોય, તો ટૂલટીપમાં HTML ટેગ્સ ટૂલટીપમાં titleરેન્ડર કરવામાં આવશે. textજો ખોટું હોય, તો DOM માં સામગ્રી દાખલ કરવા માટે jQuery ની પદ્ધતિનો ઉપયોગ કરવામાં આવશે.

જો તમે 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 નોડ બીજી દલીલ તરીકે પસાર થાય છે.

વધુ માહિતી માટે પોપરના ઓફસેટ દસ્તાવેજોનો સંદર્ભ લો .
ફોલબેક પ્લેસમેન્ટ શબ્દમાળા | એરે 'ફ્લિપ' ફોલબેક પર પોપર કઈ સ્થિતિનો ઉપયોગ કરશે તેનો ઉલ્લેખ કરવાની મંજૂરી આપો. વધુ માહિતી માટે પોપરના વર્તન દસ્તાવેજોનો સંદર્ભ લો
કસ્ટમક્લાસ શબ્દમાળા | કાર્ય ''

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

તમે એક ફંક્શન પણ પાસ કરી શકો છો કે જેમાં વધારાના વર્ગના નામો ધરાવતી સિંગલ સ્ટ્રિંગ પરત કરવી જોઈએ.
સીમા શબ્દમાળા | તત્વ 'સ્ક્રોલ પેરન્ટ' ટૂલટિપની ઓવરફ્લો અવરોધ સીમા. 'viewport', 'window', 'scrollParent', અથવા HTMLElement સંદર્ભ (માત્ર JavaScript) ના મૂલ્યો સ્વીકારે છે . વધુ માહિતી માટે પોપરના પ્રિવેન્ટઓવરફ્લો દસ્તાવેજોનો સંદર્ભ લો .
સેનિટાઇઝ બુલિયન સાચું સેનિટાઇઝેશનને સક્ષમ અથવા અક્ષમ કરો. જો સક્રિય થાય 'template'અને 'title'વિકલ્પોને સેનિટાઇઝ કરવામાં આવશે. અમારા JavaScript દસ્તાવેજીકરણમાં સેનિટાઇઝર વિભાગ જુઓ .
વ્હાઇટલિસ્ટ પદાર્થ ડિફૉલ્ટ મૂલ્ય ઑબ્જેક્ટ જેમાં માન્ય લક્ષણો અને ટૅગ્સ શામેલ છે
sanitizeFn નલ | કાર્ય નલ અહીં તમે તમારું પોતાનું સેનિટાઇઝ ફંક્શન આપી શકો છો. જો તમે સેનિટાઈઝેશન કરવા માટે સમર્પિત પુસ્તકાલયનો ઉપયોગ કરવાનું પસંદ કરો તો આ ઉપયોગી થઈ શકે છે.
popperConfig નલ | પદાર્થ નલ બુટસ્ટ્રેપના ડિફોલ્ટ પોપર રૂપરેખાને બદલવા માટે, પોપરનું રૂપરેખાંકન જુઓ

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

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

પદ્ધતિઓ

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

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

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

$().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.tooltip showજ્યારે ઇન્સ્ટન્સ પદ્ધતિને બોલાવવામાં આવે ત્યારે આ ઇવેન્ટ તરત જ ફાયર થાય છે.
બતાવેલ.bs.ટૂલટિપ જ્યારે ટૂલટિપ વપરાશકર્તાને દૃશ્યક્ષમ બનાવવામાં આવે ત્યારે આ ઇવેન્ટને ફાયર કરવામાં આવે છે (CSS સંક્રમણો પૂર્ણ થવાની રાહ જોશે).
hide.bs.tooltip hideજ્યારે ઇન્સ્ટન્સ મેથડ બોલાવવામાં આવે ત્યારે આ ઇવેન્ટ તરત જ કાઢી નાખવામાં આવે છે.
hidden.bs.tooltip જ્યારે ટૂલટિપ વપરાશકર્તાથી છુપાયેલું સમાપ્ત થઈ જાય ત્યારે આ ઇવેન્ટને ફાયર કરવામાં આવે છે (CSS સંક્રમણો પૂર્ણ થવાની રાહ જોશે).
inserted.bs.tooltip show.bs.tooltipજ્યારે ટૂલટિપ ટેમ્પલેટ DOM માં ઉમેરવામાં આવ્યું હોય ત્યારે આ ઇવેન્ટને ઇવેન્ટ પછી ફાયર કરવામાં આવે છે. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})