የመሳሪያ ምክሮች
ለአካባቢያዊ የርዕስ ማከማቻ CSS3 ን ለአኒሜሽን እና ዳታ-ቢስ-ባህሪያትን በመጠቀም ብጁ የቡትስትራፕ የመሳሪያ ምክሮችን ከCSS እና JavaScript ጋር ለመጨመር ሰነዶች እና ምሳሌዎች።
አጠቃላይ እይታ
የTooltip ፕለጊን ሲጠቀሙ ማወቅ ያለባቸው ነገሮች፡-
- የመሳሪያ ምክሮች ለቦታ አቀማመጥ በ 3 ኛ ወገን ቤተ-መጽሐፍት ፖፐር ላይ ይመረኮዛሉ . የመሳሪያ ምክሮች እንዲሰሩ ከ bootstrap.js በፊት popper.min.jsን ማካተት አለቦት ወይም
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 ውስጥ Bootstrapን ሲጠቀሙ አቅጣጫዎች ይንፀባርቃሉ።
<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;
አጠቃቀም
የ Tooltip ፕለጊን ይዘትን ያመነጫል እና በፍላጎት ላይ ምልክት ያደርጋል፣ እና በነባሪነት የመሳሪያ ምክሮችን ከቀስቀሳቸው ኤለመንት በኋላ ያስቀምጣል።
በጃቫስክሪፕት በኩል የመሳሪያውን ጥቆማ ያስነሱ፡
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)
የተትረፈረፈ auto
እናscroll
የመሳሪያ ጥቆማ ቦታ የወላጅ መያዣ የእኛን ሲይዝ overflow: auto
ወይም overflow: scroll
ሲወድ በራስ ሰር ለመለወጥ ይሞክራል .table-responsive
፣ ነገር ግን አሁንም የመጀመሪያውን አቀማመጥ ያስቀምጣል። ይህንን ለመፍታት፣ ነባሪውን ዋጋ ለመሻር አማራጩን boundary
( አማራጩን ተጠቅመው ለ Flip ማስተካከያ ) ወደ ማንኛውም HTMLElement ያቀናብሩ ፣ ለምሳሌpopperConfig
'clippingParents'
document.body
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
boundary: document.body // or document.querySelector('#boundary')
})
ምልክት ማድረጊያ
ለመሳሪያ ጫፍ የሚፈለገው ምልክት ማድረጊያ data
ባህሪ ብቻ ነው እና title
በኤችቲኤምኤል ኤለመንት ላይ የመሳሪያ ጥቆማ እንዲኖርዎት ይፈልጋሉ። የመነጨው የመሳሪያ ጫፍ ቀላል ነው፣ ምንም እንኳን ቦታ ቢፈልግም (በነባሪ፣ top
በተሰኪው የተቀናበረ)።
የመሳሪያ ምክሮችን ለቁልፍ ሰሌዳ እና አጋዥ ቴክኖሎጂ ተጠቃሚዎች እንዲሰራ ማድረግ
በተለምዶ በቁልፍ ሰሌዳ-ተኮር እና በይነተገናኝ (እንደ ማገናኛዎች ወይም የቅጽ መቆጣጠሪያዎች) ወደ ኤችቲኤምኤል ክፍሎች የመሳሪያ ምክሮችን ማከል አለብዎት። ምንም እንኳን የዘፈቀደ የኤችቲኤምኤል ኤለመንቶች (እንደ <span>
ዎች ያሉ) ባህሪውን በመጨመር ትኩረት እንዲሰጡ ማድረግ ቢቻልም 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>
አማራጮች
አማራጮች በመረጃ ባህሪያት ወይም በጃቫስክሪፕት ሊተላለፉ ይችላሉ. ለውሂብ ባህሪያት፣ data-bs-
እንደ ውስጥ ያለውን የአማራጭ ስም ወደ ላይ ጨምር data-bs-animation=""
። አማራጮችን በውሂብ ባሕሪያት በሚያልፉበት ጊዜ የአማራጭ ስም የጉዳይ አይነትን ከካሜል ኬዝ ወደ kebab-ኬዝ መቀየርዎን ያረጋግጡ። ለምሳሌ ከመጠቀም ይልቅ data-bs-customClass="beautifier"
ይጠቀሙ data-bs-custom-class="beautifier"
።
sanitize
እና
sanitizeFn
አማራጮች
allowList
የውሂብ ባህሪያትን በመጠቀም ሊቀርቡ እንደማይችሉ ልብ ይበሉ።
ስም | ዓይነት | ነባሪ | መግለጫ |
---|---|---|---|
animation |
ቡሊያን | true |
የ CSS ደብዝዝ ሽግግር ወደ መሳሪያ ጫፍ ተግብር |
container |
ሕብረቁምፊ | ኤለመንት | የውሸት | false |
የመሳሪያውን ጫፍ ከአንድ የተወሰነ አካል ጋር ያያይዙታል። ምሳሌ |
delay |
ቁጥር | ነገር | 0 |
የመሳሪያውን ጫፍ (ms) ማሳየት እና መደበቅ መዘግየት - በእጅ ቀስቅሴ አይነት ላይ አይተገበርም። ቁጥር ከቀረበ፣ መዘግየት በሁለቱም መደበቅ/ማሳየት ላይ ይተገበራል። የእቃው መዋቅር የሚከተለው ነው- |
html |
ቡሊያን | false |
ኤችቲኤምኤል በመሳሪያ ፍንጭ ውስጥ ፍቀድ። እውነት ከሆነ፣ በመሳሪያ ጥቆማው ውስጥ ያሉ የኤችቲኤምኤል መለያዎች በመሳሪያ ጥቆማው ውስጥ ስለ XSS ጥቃቶች የሚጨነቁ ከሆነ ጽሑፍ ይጠቀሙ። |
placement |
ሕብረቁምፊ | ተግባር | 'top' |
የመሳሪያውን ጫፍ እንዴት እንደሚቀመጥ - ራስ-ሰር | ከላይ | የታችኛው | ግራ | ቀኝ. አንድ ተግባር ቦታውን ለመወሰን ጥቅም ላይ ሲውል ከመሳሪያ ጫፍ DOM node ጋር እንደ መጀመሪያው መከራከሪያ እና ቀስቃሽ ኤለመንት DOM ኖድ እንደ ሁለተኛው ይባላል። ዐውደ- ጽሑፉ |
selector |
ሕብረቁምፊ | የውሸት | false |
መራጭ ከቀረበ፣የመሳሪያ ምክር ነገሮች ለተገለጹት ኢላማዎች ይላካሉ። በተግባር፣ ይህ በተለዋዋጭ ለተጨመሩ DOM አካላት ( jQuery.on ድጋፍ) የመሳሪያ ምክሮችን ተግባራዊ ለማድረግም ያገለግላል። ይህንን እና ጠቃሚ ምሳሌ ይመልከቱ ። |
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 ማጣቀሻ (በጃቫስክሪፕት በኩል ብቻ) ነው እና መቀበል ይችላል። ለበለጠ መረጃ የፖፐርን ማወቂያ ከመጠን በላይ ፍሰት ሰነዶችን ይመልከቱ ። |
customClass |
ሕብረቁምፊ | ተግባር | '' |
በሚታይበት ጊዜ ክፍሎችን ወደ መሳሪያ ጫፍ ያክሉ። እነዚህ ክፍሎች በአብነት ውስጥ ከተገለጹት ክፍሎች በተጨማሪ እንደሚጨመሩ ልብ ይበሉ። ብዙ ክፍሎችን ለመጨመር በክፍተቶች ይለያቸዋል እንዲሁም ተጨማሪ የክፍል ስሞችን የያዘ ነጠላ ሕብረቁምፊ መመለስ ያለበትን ተግባር ማለፍ ይችላሉ። |
sanitize |
ቡሊያን | true |
ንጽህናን አንቃ ወይም አሰናክል። ከነቃ 'template' እና 'title' አማራጮች ይጸዳሉ። በእኛ ጃቫስክሪፕት ሰነድ ውስጥ የንፅህና መጠበቂያ ክፍልን ይመልከቱ ። |
allowList |
ነገር | ነባሪ እሴት | የተፈቀዱ ባህሪያትን እና መለያዎችን የያዘ ነገር |
sanitizeFn |
ባዶ | ተግባር | null |
እዚህ የራስዎን የንፅህና አገልግሎት መስጠት ይችላሉ. የንፅህና አጠባበቅን ለማከናወን የተለየ ቤተ-መጽሐፍት ለመጠቀም ከመረጡ ይህ ጠቃሚ ሊሆን ይችላል። |
offset |
ድርድር | ሕብረቁምፊ | ተግባር | [0, 0] |
ከዒላማው አንጻር የመሳሪያውን ጫፍ ማካካሻ። በመረጃ ባህሪያት ውስጥ ሕብረቁምፊን በነጠላ ሰረዝ ከተለያዩ እሴቶች ማለፍ ትችላለህ፡- አንድ ተግባር ማካካሻውን ለመወሰን ጥቅም ላይ በሚውልበት ጊዜ እንደ መጀመሪያው መከራከሪያ ፖፐር አቀማመጥ, ማጣቀሻ እና ፖፐር rects ከያዘ ነገር ጋር ይባላል. ቀስቃሽ ኤለመንት DOM ኖድ እንደ ሁለተኛው ነጋሪ እሴት ተላልፏል። ተግባሩ ሁለት ቁጥሮች ያለው ድርድር መመለስ አለበት ። ለበለጠ መረጃ የፖፐር ማካካሻ ሰነዶችን ይመልከቱ ። |
popperConfig |
ባዶ | እቃ | ተግባር | null |
የ Bootstrapን ነባሪ የፖፕ አወቃቀሩን ለመቀየር የፖፐርን አወቃቀር ይመልከቱ ። አንድ ተግባር የፖፐር ውቅረትን ለመፍጠር ጥቅም ላይ ሲውል የቡትስትራፕ ነባሪ የፖፐር ውቅረት ካለው ዕቃ ጋር ይጠራል። ነባሪውን ከራስዎ ውቅር ጋር እንዲጠቀሙ እና እንዲያዋህዱ ያግዝዎታል። ተግባሩ ለፖፐር የውቅር ነገር መመለስ አለበት። |
ለግል የመሳሪያ ምክሮች የውሂብ ባህሪያት
ከላይ እንደተገለፀው ለነጠላ የመሳሪያ ምክሮች አማራጮች በመረጃ ባህሪያት አጠቃቀም በኩል ሊገለጹ ይችላሉ.
ተግባርን በመጠቀምpopperConfig
var tooltip = new bootstrap.Tooltip(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
ዘዴዎች
ያልተመሳሰሉ ዘዴዎች እና ሽግግሮች
ሁሉም የኤፒአይ ዘዴዎች ያልተመሳሰሉ ናቸው እና ሽግግር ይጀምራሉ ። ሽግግሩ እንደተጀመረ ግን ከማለቁ በፊት ወደ ደዋዩ ይመለሳሉ ። በተጨማሪም, በመሸጋገሪያ አካል ላይ የሚደረግ ዘዴ ጥሪ ችላ ይባላል .
አሳይ
የአንድ ንጥረ ነገር መሣሪያ ጫፍን ያሳያል። የመሳሪያ ጥቆማው በትክክል ከመታየቱ በፊት (ማለትም ክስተቱ ከመከሰቱ በፊት) ወደ ደዋዩ ይመለሳል ። 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()