Source

ટૂલટિપ્સ

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

ઝાંખી

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

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

આ ઘટકની એનિમેશન અસર prefers-reduced-motionમીડિયા ક્વેરી પર આધારિત છે. અમારા ઍક્સેસિબિલિટી દસ્તાવેજીકરણનો ઘટાડો ગતિ વિભાગ જુઓ .

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

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

પૃષ્ઠ પરની તમામ ટૂલટિપ્સને આરંભ કરવાની એક રીત એ છે કે તેમને તેમની data-toggleવિશેષતા દ્વારા પસંદ કરવી:

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

ઉદાહરણો

ટૂલટિપ્સ જોવા માટે નીચેની લિંક્સ પર હોવર કરો:

ચુસ્ત પેન્ટ આગામી સ્તર keffiyeh તમે કદાચ તેમના વિશે સાંભળ્યું નથી. ફોટો બૂથ દાઢી કાચી ડેનિમ લેટરપ્રેસ વેગન મેસેન્જર બેગ સ્ટમ્પટાઉન. ફાર્મ-ટુ-ટેબલ સીટન, મેક્સવીની ફિક્સી સસ્ટેનેબલ ક્વિનોઆ 8-બીટ અમેરિકન એપેરલમાં ટેરી રિચર્ડસન વિનાઇલ ચેમ્બ્રે છે . દાઢી સ્ટમ્પટાઉન, કાર્ડિગન્સ બન્હ મી લોમો થંડરકેટ્સ. ટોફુ બાયોડીઝલ વિલિયમ્સબર્ગ માર્ફા, ચાર લોકો મેક્સવીની ક્લીન્સ વેગન ચેમ્બ્રે. એક ખરેખર માર્મિક કારીગર ગમે તે કીતાર , સીનસ્ટર ફાર્મ-ટુ-ટેબલ બેંકસી ઓસ્ટિન ટ્વિટર હેન્ડલ ફ્રીગન ક્રેડ રો ડેનિમ સિંગલ-ઓરિજિન કોફી વાયરલ.

ચાર ટૂલટિપ્સ દિશાઓ જોવા માટે નીચેના બટનો પર હોવર કરો: ઉપર, જમણે, નીચે અને ડાબે.

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

નામ પ્રકાર ડિફૉલ્ટ વર્ણન
એનિમેશન બુલિયન સાચું ટૂલટિપ પર 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 તેના લક્ષ્યની તુલનામાં ટૂલટિપની ઑફસેટ. વધુ માહિતી માટે Popper.js ના ઑફસેટ દસ્તાવેજોનો સંદર્ભ લો .
ફોલબેક પ્લેસમેન્ટ શબ્દમાળા | એરે 'ફ્લિપ' ફોલબેક પર પોપર કઈ સ્થિતિનો ઉપયોગ કરશે તેનો ઉલ્લેખ કરવાની મંજૂરી આપો. વધુ માહિતી માટે Popper.js ના વર્તન દસ્તાવેજોનો સંદર્ભ લો
સીમા શબ્દમાળા | તત્વ 'સ્ક્રોલ પેરન્ટ' ટૂલટિપની ઓવરફ્લો અવરોધ સીમા. 'viewport', 'window', 'scrollParent', અથવા HTMLElement સંદર્ભ (માત્ર JavaScript) ના મૂલ્યો સ્વીકારે છે . વધુ માહિતી માટે Popper.js ના preventOverflow દસ્તાવેજો નો સંદર્ભ લો .

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

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

પદ્ધતિઓ

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

બધી 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.ટૂલટિપ 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…
})