ટૂલટિપ્સ
સ્થાનિક શીર્ષક સંગ્રહ માટે એનિમેશન અને ડેટા-એટ્રીબ્યુટ્સ માટે 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 માંથી દૂર કરવામાં આવે તે પહેલાં છુપાયેલ હોવી આવશ્યક છે.
તે બધું મળ્યું? સરસ, ચાલો જોઈએ કે તેઓ કેટલાક ઉદાહરણો સાથે કેવી રીતે કાર્ય કરે છે.
પૃષ્ઠ પરની તમામ ટૂલટિપ્સને આરંભ કરવાની એક રીત એ છે કે તેમને તેમની 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)
ટૂલટિપ માટે જરૂરી માર્કઅપ માત્ર એક data
વિશેષતા છે અને title
HTML એલિમેન્ટ પર તમે ટૂલટિપ રાખવા માંગો છો. ટૂલટિપનું જનરેટ કરેલ માર્કઅપ એકદમ સરળ છે, જો કે તેને પોઝિશનની જરૂર છે (ડિફૉલ્ટ રૂપે, 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 ફેડ ટ્રાન્ઝિશન લાગુ કરો |
કન્ટેનર | શબ્દમાળા | તત્વ | ખોટું | ખોટું | ચોક્કસ તત્વ સાથે ટૂલટિપ જોડે છે. ઉદાહરણ |
વિલંબ | નંબર | પદાર્થ | 0 | ટૂલટિપ (ms) બતાવવામાં અને છુપાવવામાં વિલંબ - મેન્યુઅલ ટ્રિગર પ્રકાર પર લાગુ થતો નથી જો નંબર પૂરો પાડવામાં આવે છે, તો છુપાવો/શો બંને માટે વિલંબ લાગુ પડે છે ઑબ્જેક્ટ માળખું છે: |
html | બુલિયન | ખોટું | ટૂલટીપમાં HTML ને મંજૂરી આપો. જો સાચું હોય, તો ટૂલટીપમાં HTML ટેગ્સ ટૂલટીપમાં જો તમે XSS હુમલાઓ વિશે ચિંતિત હોવ તો ટેક્સ્ટનો ઉપયોગ કરો. |
પ્લેસમેન્ટ | શબ્દમાળા | કાર્ય | 'ટોચ' | ટૂલટીપને કેવી રીતે સ્થાન આપવું - ઓટો | ટોચ | નીચે | ડાબે | અધિકાર જ્યારે પ્લેસમેન્ટ નક્કી કરવા માટે ફંક્શનનો ઉપયોગ કરવામાં આવે છે, ત્યારે તેને ટૂલટિપ DOM નોડ સાથે તેની પ્રથમ દલીલ તરીકે અને ટ્રિગરિંગ ઘટક DOM નોડને તેના બીજા તરીકે કહેવામાં આવે છે. સંદર્ભ |
પસંદગીકાર | શબ્દમાળા | ખોટું | ખોટું | જો પસંદગીકાર પ્રદાન કરવામાં આવે, તો ટૂલટિપ ઑબ્જેક્ટ્સ ઉલ્લેખિત લક્ષ્યોને સોંપવામાં આવશે. વ્યવહારમાં, આનો ઉપયોગ પોપોવર્સ ઉમેરવા માટે ગતિશીલ HTML સામગ્રીને સક્ષમ કરવા માટે થાય છે. આ અને એક માહિતીપ્રદ ઉદાહરણ જુઓ . |
નમૂનો | તાર | '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' |
ટૂલટીપ બનાવતી વખતે ઉપયોગ કરવા માટે બેઝ HTML. ટૂલટીપને
સૌથી બહારના રેપર તત્વમાં |
શીર્ષક | શબ્દમાળા | તત્વ | કાર્ય | '' |
જો કોઈ ફંક્શન આપવામાં આવ્યું હોય, તો તેને તે તત્વ સાથે તેના |
ટ્રિગર | તાર | 'હોવર ફોકસ' | ટૂલટિપ કેવી રીતે ટ્રિગર થાય છે - ક્લિક કરો | હોવર | ફોકસ | મેન્યુઅલ તમે બહુવિધ ટ્રિગર્સ પસાર કરી શકો છો; તેમને જગ્યા સાથે અલગ કરો.
|
ઓફસેટ | નંબર | તાર | 0 | તેના લક્ષ્યની તુલનામાં ટૂલટિપની ઑફસેટ. વધુ માહિતી માટે Popper.js ના ઑફસેટ દસ્તાવેજોનો સંદર્ભ લો . |
ફોલબેક પ્લેસમેન્ટ | શબ્દમાળા | એરે | 'ફ્લિપ' | ફોલબેક પર પોપર કઈ સ્થિતિનો ઉપયોગ કરશે તેનો ઉલ્લેખ કરવાની મંજૂરી આપો. વધુ માહિતી માટે Popper.js ના વર્તન દસ્તાવેજોનો સંદર્ભ લો |
સીમા | શબ્દમાળા | તત્વ | 'સ્ક્રોલ પેરન્ટ' | ટૂલટિપની ઓવરફ્લો અવરોધ સીમા. 'viewport' , 'window' , 'scrollParent' , અથવા HTMLElement સંદર્ભ (માત્ર JavaScript) ના મૂલ્યો સ્વીકારે છે . વધુ માહિતી માટે Popper.js ના preventOverflow દસ્તાવેજો નો સંદર્ભ લો . |
વ્યક્તિગત ટૂલટિપ્સ માટે ડેટા લક્ષણો
વ્યક્તિગત ટૂલટિપ્સ માટેના વિકલ્પો વૈકલ્પિક રીતે ડેટા એટ્રિબ્યુટ્સના ઉપયોગ દ્વારા સ્પષ્ટ કરી શકાય છે, જેમ ઉપર સમજાવ્યું છે.
અસુમેળ પદ્ધતિઓ અને સંક્રમણો
બધી API પદ્ધતિઓ અસુમેળ છે અને સંક્રમણ શરૂ કરે છે . સંક્રમણ શરૂ થતાંની સાથે જ તેઓ કૉલર પાસે પાછા ફરે છે પરંતુ તે સમાપ્ત થાય તે પહેલાં . વધુમાં, સંક્રમણ ઘટક પર પદ્ધતિ કૉલ અવગણવામાં આવશે .
તત્વ સંગ્રહમાં ટૂલટિપ હેન્ડલર જોડે છે.
તત્વની ટૂલટિપ દર્શાવે છે. ટૂલટિપ વાસ્તવમાં બતાવવામાં આવે તે પહેલાં (એટલે કે shown.bs.tooltip
ઘટના બને તે પહેલાં) કૉલર પર પાછા ફરે છે. આને ટૂલટિપનું "મેન્યુઅલ" ટ્રિગરિંગ ગણવામાં આવે છે. શૂન્ય-લંબાઈના શીર્ષકો સાથેની ટૂલટિપ્સ ક્યારેય પ્રદર્શિત થતી નથી.
$('#element').tooltip('show')
તત્વની ટૂલટિપ છુપાવે છે. ટૂલટિપ વાસ્તવમાં છુપાઈ જાય તે પહેલાં (એટલે કે hidden.bs.tooltip
ઘટના બને તે પહેલાં) કૉલર પર પાછા ફરે છે. આને ટૂલટિપનું "મેન્યુઅલ" ટ્રિગરિંગ ગણવામાં આવે છે.
$('#element').tooltip('hide')
તત્વની ટૂલટિપને ટૉગલ કરે છે. ટૂલટિપ વાસ્તવમાં બતાવવામાં આવે અથવા છુપાવવામાં આવે તે પહેલાં કૉલર પર પાછા ફરે છે (એટલે કે ઘટના shown.bs.tooltip
અથવા hidden.bs.tooltip
ઘટના બને તે પહેલાં). આને ટૂલટિપનું "મેન્યુઅલ" ટ્રિગરિંગ ગણવામાં આવે છે.
$('#element').tooltip('toggle')
તત્વની ટૂલટિપ છુપાવે છે અને નાશ કરે છે. ટૂલટિપ્સ કે જે પ્રતિનિધિમંડળનો ઉપયોગ કરે છે (જે વિકલ્પનો ઉપયોગ કરીનેselector
બનાવવામાં આવે છે ) વંશજ ટ્રિગર તત્વો પર વ્યક્તિગત રીતે નાશ કરી શકાતી નથી.
$('#element').tooltip('dispose')
એલિમેન્ટની ટૂલટિપ બતાવવાની ક્ષમતા આપે છે. ટૂલટિપ્સ ડિફૉલ્ટ રૂપે સક્ષમ છે.
$('#element').tooltip('enable')
એલિમેન્ટની ટૂલટિપ બતાવવાની ક્ષમતાને દૂર કરે છે. ટૂલટિપ ફક્ત ત્યારે જ બતાવવામાં સક્ષમ હશે જો તે ફરીથી સક્ષમ હશે.
$('#element').tooltip('disable')
એલિમેન્ટની ટૂલટિપ બતાવવાની અથવા છુપાવવાની ક્ષમતાને ટૉગલ કરે છે.
$('#element').tooltip('toggleEnabled')
તત્વની ટૂલટિપની સ્થિતિ અપડેટ કરે છે.
$('#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…
})