ટૂલટિપ્સ

સ્થાનિક શીર્ષક સંગ્રહ માટે એનિમેશન અને ડેટા-એટ્રીબ્યુટ્સ માટે 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 ની અંદરના તત્વને કારણે ટૂલટિપ્સ ટ્રિગર થઈ શકે છે.

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

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

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

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

માર્કઅપ

ટૂલટિપ માટે જરૂરી માર્કઅપ માત્ર એક dataવિશેષતા છે અને titleHTML એલિમેન્ટ પર તમે ટૂલટિપ રાખવા માંગો છો. ટૂલટિપનું જનરેટ કરેલ માર્કઅપ એકદમ સરળ છે, જો કે તેને પોઝિશનની જરૂર છે (ડિફૉલ્ટ રૂપે, 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>

વિકલ્પો

વિકલ્પો ડેટા વિશેષતાઓ અથવા JavaScript દ્વારા પસાર કરી શકાય છે. ડેટા એટ્રિબ્યુટ્સ માટે, વિકલ્પ નામને 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...
})