ટૂલટિપ્સ
સ્થાનિક ટાઇટલ સ્ટોરેજ માટે એનિમેશન અને ડેટા-બીએસ-એટ્રિબ્યુટ્સ માટે 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 ની અંદરના તત્વને કારણે ટૂલટિપ્સ ટ્રિગર થઈ શકે છે.
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
વિશેષતા છે અને title
HTML એલિમેન્ટ પર તમે ટૂલટિપ રાખવા માંગો છો. ટૂલટિપનું જનરેટ કરેલ માર્કઅપ એકદમ સરળ છે, જો કે તેને પોઝિશનની જરૂર છે (ડિફૉલ્ટ રૂપે, 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 |
ચોક્કસ તત્વ સાથે ટૂલટિપ જોડે છે. ઉદાહરણ |
delay |
નંબર | પદાર્થ | 0 |
ટૂલટિપ (ms) બતાવવામાં અને છુપાવવામાં વિલંબ - મેન્યુઅલ ટ્રિગર પ્રકાર પર લાગુ થતો નથી જો નંબર પૂરો પાડવામાં આવે છે, તો છુપાવો/શો બંને માટે વિલંબ લાગુ પડે છે ઑબ્જેક્ટ માળખું છે: |
html |
બુલિયન | false |
ટૂલટીપમાં HTML ને મંજૂરી આપો. જો સાચું હોય, તો ટૂલટીપમાં HTML ટેગ્સ ટૂલટીપમાં જો તમે XSS હુમલાઓ વિશે ચિંતિત હોવ તો ટેક્સ્ટનો ઉપયોગ કરો. |
placement |
શબ્દમાળા | કાર્ય | 'top' |
ટૂલટીપને કેવી રીતે સ્થાન આપવું - ઓટો | ટોચ | નીચે | ડાબે | અધિકાર જ્યારે પ્લેસમેન્ટ નક્કી કરવા માટે ફંક્શનનો ઉપયોગ કરવામાં આવે છે, ત્યારે તેને ટૂલટિપ DOM નોડ સાથે તેની પ્રથમ દલીલ તરીકે અને ટ્રિગરિંગ ઘટક DOM નોડને તેના બીજા તરીકે કહેવામાં આવે છે. સંદર્ભ |
selector |
શબ્દમાળા | ખોટું | false |
જો પસંદગીકાર પ્રદાન કરવામાં આવે, તો ટૂલટિપ ઑબ્જેક્ટ્સ ઉલ્લેખિત લક્ષ્યોને સોંપવામાં આવશે. jQuery.on વ્યવહારમાં, આનો ઉપયોગ ગતિશીલ રીતે ઉમેરાયેલા DOM તત્વો ( સપોર્ટ) પર ટૂલટિપ્સ લાગુ કરવા માટે પણ થાય છે . આ અને એક માહિતીપ્રદ ઉદાહરણ જુઓ . |
template |
તાર | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
ટૂલટીપ બનાવતી વખતે ઉપયોગ કરવા માટે બેઝ HTML. ટૂલટીપને
સૌથી બહારના રેપર તત્વમાં |
title |
શબ્દમાળા | તત્વ | કાર્ય | '' |
જો કોઈ ફંક્શન આપવામાં આવ્યું હોય, તો તેને તે તત્વ સાથે તેના |
trigger |
તાર | 'hover focus' |
ટૂલટિપ કેવી રીતે ટ્રિગર થાય છે - ક્લિક કરો | હોવર | ફોકસ | મેન્યુઅલ તમે બહુવિધ ટ્રિગર્સ પસાર કરી શકો છો; તેમને જગ્યા સાથે અલગ કરો.
|
fallbackPlacements |
એરે | ['top', 'right', 'bottom', 'left'] |
એરેમાં પ્લેસમેન્ટની યાદી આપીને ફોલબેક પ્લેસમેન્ટ વ્યાખ્યાયિત કરો (પસંદગીના ક્રમમાં). વધુ માહિતી માટે પોપરના વર્તન દસ્તાવેજોનો સંદર્ભ લો |
boundary |
શબ્દમાળા | તત્વ | 'clippingParents' |
ટૂલટીપની ઓવરફ્લો અવરોધ સીમા (ફક્ત પોપરના ઓવરફ્લો અટકાવનારને લાગુ પડે છે). મૂળભૂત રીતે તે 'clippingParents' HTMLElement સંદર્ભ (માત્ર JavaScript દ્વારા) છે અને સ્વીકારી શકે છે. વધુ માહિતી માટે Popper's detectOverflow docs નો સંદર્ભ લો . |
customClass |
શબ્દમાળા | કાર્ય | '' |
જ્યારે તે બતાવવામાં આવે ત્યારે ટૂલટિપમાં વર્ગો ઉમેરો. નોંધ કરો કે આ વર્ગો નમૂનામાં ઉલ્લેખિત કોઈપણ વર્ગો ઉપરાંત ઉમેરવામાં આવશે. બહુવિધ વર્ગો ઉમેરવા માટે, તેમને જગ્યાઓ સાથે અલગ કરો: તમે એક ફંક્શન પણ પાસ કરી શકો છો કે જેમાં વધારાના વર્ગના નામો ધરાવતી સિંગલ સ્ટ્રિંગ પરત કરવી જોઈએ. |
sanitize |
બુલિયન | true |
સેનિટાઇઝેશનને સક્ષમ અથવા અક્ષમ કરો. જો સક્રિય થાય 'template' અને 'title' વિકલ્પોને સેનિટાઇઝ કરવામાં આવશે. અમારા JavaScript દસ્તાવેજીકરણમાં સેનિટાઇઝર વિભાગ જુઓ . |
allowList |
પદાર્થ | ડિફૉલ્ટ મૂલ્ય | ઑબ્જેક્ટ જેમાં માન્ય લક્ષણો અને ટૅગ્સ શામેલ છે |
sanitizeFn |
નલ | કાર્ય | null |
અહીં તમે તમારું પોતાનું સેનિટાઇઝ ફંક્શન આપી શકો છો. જો તમે સેનિટાઈઝેશન કરવા માટે સમર્પિત પુસ્તકાલયનો ઉપયોગ કરવાનું પસંદ કરો તો આ ઉપયોગી થઈ શકે છે. |
offset |
એરે | શબ્દમાળા | કાર્ય | [0, 0] |
તેના લક્ષ્યની તુલનામાં ટૂલટિપની ઑફસેટ. તમે અલ્પવિરામથી વિભાજિત મૂલ્યો સાથે ડેટા વિશેષતાઓમાં સ્ટ્રિંગ પસાર કરી શકો છો જેમ કે: જ્યારે ઑફસેટ નક્કી કરવા માટે ફંક્શનનો ઉપયોગ કરવામાં આવે છે, ત્યારે તેને પોપર પ્લેસમેન્ટ, રેફરન્સ ધરાવતા ઑબ્જેક્ટ સાથે બોલાવવામાં આવે છે અને પોપર તેની પ્રથમ દલીલ તરીકે રેક્ટ કરે છે. ટ્રિગરિંગ એલિમેન્ટ DOM નોડ બીજી દલીલ તરીકે પસાર થાય છે. ફંક્શનને બે સંખ્યાઓ સાથે એરે પરત કરવું આવશ્યક છે: . વધુ માહિતી માટે પોપરના ઓફસેટ દસ્તાવેજોનો સંદર્ભ લો . |
popperConfig |
નલ | પદાર્થ | કાર્ય | null |
બુટસ્ટ્રેપના ડિફોલ્ટ પોપર રૂપરેખાને બદલવા માટે, પોપરનું રૂપરેખાંકન જુઓ . જ્યારે પોપર કન્ફિગરેશન બનાવવા માટે ફંક્શનનો ઉપયોગ કરવામાં આવે છે, ત્યારે તેને એવા ઑબ્જેક્ટ સાથે બોલાવવામાં આવે છે જેમાં બુટસ્ટ્રેપનું ડિફોલ્ટ પોપર કન્ફિગરેશન હોય છે. તે તમને તમારા પોતાના રૂપરેખાંકન સાથે ડિફોલ્ટનો ઉપયોગ કરવામાં અને મર્જ કરવામાં મદદ કરે છે. ફંક્શને પોપર માટે રૂપરેખાંકન ઑબ્જેક્ટ પરત કરવું આવશ્યક છે. |
વ્યક્તિગત ટૂલટિપ્સ માટે ડેટા લક્ષણો
વ્યક્તિગત ટૂલટિપ્સ માટેના વિકલ્પો વૈકલ્પિક રીતે ડેટા એટ્રિબ્યુટ્સના ઉપયોગ દ્વારા સ્પષ્ટ કરી શકાય છે, જેમ ઉપર સમજાવ્યું છે.
સાથે ફંક્શનનો ઉપયોગ કરવોpopperConfig
var tooltip = new bootstrap.Tooltip(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
પદ્ધતિઓ
અસુમેળ પદ્ધતિઓ અને સંક્રમણો
બધી API પદ્ધતિઓ અસુમેળ છે અને સંક્રમણ શરૂ કરે છે . સંક્રમણ શરૂ થતાંની સાથે જ તેઓ કૉલર પાસે પાછા ફરે છે પરંતુ તે સમાપ્ત થાય તે પહેલાં . વધુમાં, સંક્રમણ ઘટક પર પદ્ધતિ કૉલ અવગણવામાં આવશે .
બતાવો
તત્વની ટૂલટિપ દર્શાવે છે. ટૂલટિપ વાસ્તવમાં બતાવવામાં આવે તે પહેલાં (એટલે કે 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()