ޓޫލްޓިޕްސް
އެނިމޭޝަންތަކަށް ސީއެސްއެސް3 ބޭނުންކޮށްގެން ސީއެސްއެސް އަދި ޖާވާސްކްރިޕްޓާއެކު ކަސްޓަމް ބޫޓްސްޓްރަޕް ޓޫލްޓިޕްސް އިތުރުކުރުމަށް ލިޔެކިޔުންތަކާއި މިސާލުތައް އަދި ލޯކަލް ޓައިޓަލް ސްޓޯރޭޖަށް ޑޭޓާ-ބީއެސް-އެޓްރިބިއުޓްސް.
އޯވަރވިއު
ޓޫލްޓިޕް ޕްލަގިން ބޭނުންކުރާއިރު އެނގެން ޖެހޭ ކަންތައްތައް:
- ޓޫލްޓިޕްސް ޕޮޒިޝަން ކުރުމަށް ބަރޯސާވެފައިވަނީ 3 ވަނަ ފަރާތުގެ ލައިބްރަރީ ޕޮޕަރ އަށެވެ. ޓޫލްޓިޕްސް މަސައްކަތް ކުރުމަށްޓަކައި bootstrap.js ގެ ކުރިން popper.min.js ހިމަނަން ނުވަތަ ޕޮޕަރ ހިމެނޭ
bootstrap.bundle.min.js
/ ބޭނުން ކުރަން ޖެހެއެވެ!bootstrap.bundle.js
- ޓޫލްޓިޕްސް އަކީ ޕާފޯމަންސް ސަބަބުތަކާހުރެ އޮޕްޓް-އިން އެއްޗެއް ކަމުން އަމިއްލައަށް އިނިޝިއަލައިޒް ކުރަން ޖެހެއެވެ .
- ޒީރޯ ދިގުމިނުގެ ސުރުޚީތައް ހުންނަ ޓޫލްޓިޕްތައް ދުވަހަކުވެސް ނުފެނެއެވެ.
container: 'body'
މިއަށްވުރެ ކޮމްޕްލެކްސް ކޮމްޕޯނެންޓްތަކުގައި (އަޅުގަނޑުމެންގެ އިންޕުޓް ގްރޫޕްތަކާއި، ބަޓަން ގްރޫޕްތައް ފަދަ) ރެންޑަރިންގ މައްސަލަތަކުން ސަލާމަތްވުމަށް ކަނޑައަޅާށެވެ .- ފޮރުވިފައިވާ އެލިމެންޓްތަކުގެ މައްޗަށް ޓޫލްޓިޕްސް ޓްރިގަރ ކުރުމުން ފައިދާއެއް ނުވާނެއެވެ.
- ޓޫލްޓިޕްސް ފޯރ
.disabled
ނުވަތަdisabled
އެލިމެންޓްސް ޓްރިގަރ ކުރަންވާނީ ރެޕަރ އެލިމެންޓެއްގެ މައްޗަށެވެ. - އެތައް ލައިނެއް ފުޅާވެފައިވާ ހައިޕަރލިންކްތަކުން ޓްރިގަރ ކުރާއިރު، ޓޫލްޓިޕްސް ސެންޓަރ ވާނެއެވެ. މި ސުލޫކުން ސަލާމަތްވުމަށްޓަކައި
white-space: nowrap;
އޮން ޔޫއާރ ސް ބޭނުން ކުރާށެވެ .<a>
- ޓޫލްޓިޕްތައް ފޮރުވަން ޖެހޭނީ އެތަކެތީގެ އެލިމެންޓްތައް ޑީއޯއެމް އިން ނައްތާލުމުގެ ކުރިންނެވެ.
- ޓޫލްޓިޕްސް ޓްރިގަރ ކުރެވޭނީ ޝެޑޯ ޑޮމް އެއްގެ ތެރޭގައި ހުންނަ އެލިމެންޓެއްގެ ސަބަބުންނެވެ.
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)
})
މިސާލުތަކެވެ
ޓޫލްޓިޕްސް ބަލާލުމަށް ތިރީގައިވާ ލިންކްތަކުގެ މައްޗަށް ހޯވަރ ކޮށްލައްވާ:
ޓޫލްޓިޕްތަކާއެކު ބައެއް އިންލައިން ލިންކްތައް ދައްކާލުމަށް ޕްލޭސްހޯލްޑަރ ޓެކްސްޓް . މިއީ މިހާރު ހަމައެކަނި ފިލާއެއް، ކިލަރއެއް ނެތް. ކޮންޓެންޓް މިތަނުގައި ބަހައްޓާފައިވަނީ ހަމައެކަނި ހަގީގީ ލިޔުމެއްގެ ޙާޟިރީ ނަކަލު ކުރުމަށްޓަކައެވެ . އަދި އެ ހުރިހާ ކަމެއް ހަމައެކަނި ތިބާއަށް ޙަޤީޤީ ދުނިޔޭގެ ޙާލަތްތަކުގައި ބޭނުންކުރާއިރު ޓޫލްޓިޕްތައް ފެންނާނެ ގޮތުގެ ޚިޔާލެއް ދިނުމަށްޓަކައެވެ. އެހެންވީމާ އިރާދަކުރެއްވިއްޔާ މިހާރު ތިޔަބޭފުޅުންނަށް ފެނިވަޑައިގެންފައިވާނެ ލިންކްތަކުގައިވާ މި ޓޫލްޓިޕްތައް އަމަލީ ގޮތުން މަސައްކަތް ކުރެވޭނެ ގޮތް، އެއްފަހަރު އަމިއްލަ ސައިޓެއްގައި ނުވަތަ ޕްރޮޖެކްޓެއްގައި އެ ޓޫލްޓިޕްތައް ބޭނުން ކުރެއްވުމުން .
ތިރީގައިވާ ބަޓަންތަކުގެ މައްޗަށް ހޯވަރ ކޮށްލުމުން ޓޫލްޓިޕްސްގެ ހަތަރު މިސްރާބު ފެންނާނެއެވެ: މަތީ، ވާތް، ތިރީ، އަދި ވާތު. އާރުޓީއެލްގައި ބޫޓްސްޓްރެޕް ބޭނުންކުރާއިރު މިސްރާބުތައް ލޯގަނޑުން ފެނެއެވެ.
<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>
އަދި ކަސްޓަމް އެޗްޓީއެމްއެލް އިތުރުކޮށްގެން:
<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>
އެސްވީޖީއަކާއެކު:
ސާސް އެވެ
ވެރިއޭބަލްސް އެވެ
$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;
ބޭނުން ކުރުން
ޓޫލްޓިޕް ޕްލަގިން އިން ޑިމާންޑް ކުރުމުން ކޮންޓެންޓާއި މާކަޕް އުފައްދައި، ޑިފޯލްޓްކޮށް ޓޫލްޓިޕްތައް އެމީހުންގެ ޓްރިގަރ އެލިމެންޓްގެ ފަހަތުގައި ބެހެއްޓޭނެއެވެ.
ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް ޓޫލްޓިޕް ޓްރިގަރ ކުރާށެވެ:
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)
އޯވަރފްލޯ auto
އާއި ...scroll
ޓޫލްޓިޕް ޕޮޒިޝަން އޮޓޮމެޓިކުން ބަދަލުވާން މަސައްކަތް ކުރަނީ ބެލެނިވެރި ކޮންޓެއިނަރެއްގައި އަޅުގަނޑުމެންގެ overflow: auto
, އެކަމަކު އަދިވެސް އަސްލު ޕްލޭސްމަންޓްގެ ޕޮޒިޝަން ބެހެއްޓޭ. މިކަން ހައްލުކުރުމަށްޓަކައި، ޑިފޯލްޓް ވެލިއު އޯވަރރައިޑް ކުރުމަށް އޮޕްޝަން (އޮޕްޝަން ބޭނުންކޮށްގެން ފްލިޕް މޮޑިފައިއަރ އަށް ) އެއްވެސް HTMLElement އަށް ސެޓް ކުރާށެވެ، , ފަދައިން :overflow: scroll
.table-responsive
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
އެޗްޓީއެމްއެލް އެލިމެންޓްގައި ޓޫލްޓިޕް އެއް ހުންނަން ބޭނުންވާ ކަމަށް ވެސް ވިދާޅުވި އެވެ. ޓޫލްޓިޕްގެ ޖެނެރޭޓް ކުރެވޭ މާކަޕް އަކީ ތަންކޮޅެއް ސާދާ އެއްޗެއް ނަމަވެސް، އެއަށް ޕޮޒިޝަނެއް ބޭނުންވާ ނަމަވެސް (ޑިފޯލްޓްކޮށް، top
ޕްލަގިން އިން ސެޓް ކޮށްފައި ހުންނަނީ) އެވެ.
ކީބޯޑާއި އެސިސްޓިވް ޓެކްނޮލޮޖީ ބޭނުންކުރާ ފަރާތްތަކަށް ޓޫލްޓިޕްސް ފައިދާހުރި ގޮތަކަށް ހެދުން
އެޗްޓީއެމްއެލް އެލިމެންޓްތަކަށް އިތުރުކުރަންވާނީ ހަމައެކަނި ސަގާފީ ގޮތުން ކީބޯޑަށް ފޯކަސް ކުރެވޭ އަދި އިންޓަރެކްޓިވް (ލިންކް ނުވަތަ ފޯމް ކޮންޓްރޯލް ފަދަ) އެލިމެންޓްތަކަށެވެ. އެޓްރިބިއުޓް އިތުރުކޮށްގެން އަމިއްލައަށް އެޗްޓީއެމްއެލް އެލިމެންޓްތައް ( <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>
އިޚްތިޔާރުތައް
ޑޭޓާ އެޓްރިބިއުޓްސް ނުވަތަ ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް އޮޕްޝަންތައް ޕާސް ކުރެވޭނެ އެވެ. ޑޭޓާ އެޓްރިބިއުޓްތަކަށް، data-bs-
ގައިވާ ފަދައިން، އޮޕްޝަން ނަން އަށް އިތުރުކުރުން data-bs-animation=""
. ޑޭޓާ އެޓްރިބިއުޓްސް މެދުވެރިކޮށް އޮޕްޝަންތައް ފާސްކުރާއިރު އޮޕްޝަން ނަމުގެ ކޭސް ޓައިޕް camelCase އިން kebab-case އަށް ބަދަލުކުރުން ޔަގީންކުރައްވާށެވެ. މިސާލަކަށް ބޭނުން ކުރުމުގެ ބަދަލުގައި ބޭނުން data-bs-customClass="beautifier"
ކުރާށެވެ data-bs-custom-class="beautifier"
.
sanitize
,
sanitizeFn
, އަދި
allowList
އޮޕްޝަންތައް ސަޕްލައި ނުކުރެވޭނެކަން ފާހަގަކޮށްލެވެއެވެ.
ނަން | ވައްތަރު | ޑީފޯލްޓް | ތަފްޞީލު |
---|---|---|---|
animation |
ބޫލިއަން އެވެ | true |
ޓޫލްޓިޕް އަށް ސީއެސްއެސް ފޭޑް ޓްރާންސިޝަން އެއް އެޕްލައި ކުރާށެވެ |
container |
ސްޓްރިންގް | އެލިމެންޓް | ރަނގަޅުނޫން | false |
ވަކި އެލިމެންޓަކަށް ޓޫލްޓިޕް އިތުރުކުރެއެވެ. މިސާލު: |
delay |
ނަންބަރު | އެއްޗެއް | 0 |
ޓޫލްޓިޕް ދައްކައި ފޮރުވުން ލަސްކުރުން (ms) - މެނުއަލް ޓްރިގަރ ޓައިޕް އަށް ނުހިނގާނެއެވެ ނަންބަރެއް ފޯރުކޮށްދީފިނަމަ، ފޮރުވާ/ދައްކާ ދެ ގޮތަށް ވެސް ޑިލޭ ޖަހައެވެ އެއްޗެއްގެ އޮނިގަނޑަކީ: |
html |
ބޫލިއަން އެވެ | false |
ޓޫލްޓިޕްގައި އެޗްޓީއެމްއެލް އަށް ހުއްދަ ދޭށެވެ. ތެދެއްނަމަ ޓޫލްޓިޕްގެ އެޗްޓީއެމްއެލް ޓެގްތައް ޓޫލްޓިޕްގައި އެކްސްއެސްއެސް ހަމަލާތަކާ މެދު ކަންބޮޑުވާނަމަ ޓެކްސްޓް ބޭނުން ކުރާށެވެ. |
placement |
ސްޓްރިންގް | ފަންކްޝަން | 'top' |
ޓޫލްޓިޕް ޕޮޒިޝަން ކުރާނެ ގޮތް - އޮޓޯ | މަތީގައި | ތިރީގައި | ކަނާތްފަރާތުން | ކަނާތް. ކަނޑައެޅިއްޖެނަމަ، އެއީ ޑައިނަމިކް ގޮތެއްގައި ޓޫލްޓިޕް ރީއޮރިއެންޓް ކުރާނެއެވެ ޕްލޭސްމަންޓް ކަނޑައެޅުމަށް ފަންކްޝަނެއް ބޭނުންކުރާއިރު، އެ ފަންކްޝަނަށް ގޮވާލަނީ އޭގެ ފުރަތަމަ އަރގިއުމެންޓްގެ ގޮތުގައި ޓޫލްޓިޕް ޑީއޯއެމް ނޯޑް އަދި ދެވަނަ އަރގިއުމެންޓްގެ ގޮތުގައި ޓްރިގަރިންގ އެލިމެންޓް ޑީއޯއެމް ނޯޑް ހިފައިގެންނެވެ. ކޮންޓެކްސްޓް |
selector |
ސްޓްރިންގް | ރަނގަޅުނޫން | false |
ސެލެކްޓަރެއް ފޯރުކޮށްދީފިނަމަ، ޓޫލްޓިޕް އޮބްޖެކްޓްތައް ކަނޑައެޅިފައިވާ ޓާގެޓްތަކަށް ޑެލިގޭޓް ކުރެވޭނެއެވެ. ޢަމަލީގޮތުން ބަލާއިރު، މިއީ ޑައިނަމިކް ގޮތެއްގައި އިތުރުކުރެވޭ ޑީއޯއެމް އެލިމެންޓްތަކަށް ( jQuery.on ސަޕޯޓް) ޓޫލްޓިޕްސް ވެސް އަމަލުކުރުމަށް ބޭނުންކުރާ އެއްޗެކެވެ. މިކަމާއި މަޢުލޫމާތު ގިނަ މިސާލެއް ބައްލަވާށެވެ . |
template |
ސްޓްރިންގ | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
ޓޫލްޓިޕް އުފައްދާއިރު ބޭނުންކުރާނެ އެޗްޓީއެމްއެލް ބޭސްކުރުން. ޓޫލްޓިޕްގެ
އެންމެ ބޭރުގައި ހުންނަ ރެޕަރ އެލިމެންޓްގައި |
title |
ސްޓްރިންގް | އެލިމެންޓް | ފަންކްޝަން | '' |
ފަންކްޝަނެއް ދީފިނަމަ، އެއަށް ގޮވާނީ އޭގެ |
trigger |
ސްޓްރިންގ | 'hover focus' |
ޓޫލްޓިޕް ޓްރިގަރ ކުރާ ގޮތް - | ހޯވަރ ކުރާށެވެ | ފޯކަސް | މެނުއަލް. އެތައް ޓްރިގަރެއް ފާސްވެދާނެ؛ އެތަކެތި ވަކިކޮށް ޖާގައެއް ދީގެންނެވެ.
|
fallbackPlacements |
އެރޭ އެވެ | ['top', 'right', 'bottom', 'left'] |
އެރޭގައި ޕްލޭސްމަންޓްތަކުގެ ލިސްޓެއް ފޯރުކޮށްދީގެން (އިސްކަންދޭ ތަރުތީބުން) ފޯލްބެކް ޕްލޭސްމަންޓްތައް މާނަކުރުން. އިތުރު މަޢުލޫމާތު ހޯދުމަށް ޕޮޕަރގެ ބިހޭވިއަރ ޑޮކްސް އަށް ރިޢާޔަތް ކުރައްވާށެވެ |
boundary |
ސްޓްރިންގް | އެއްޗެއްގެ ބައެއް | 'clippingParents' |
ޓޫލްޓިޕްގެ އޯވަރފްލޯ ކޮންސްޓްރެއިންޓް ބައުންޑަރީ (އެޕްލައި ކުރެވެނީ ހަމައެކަނި ޕޮޕަރގެ preventOverflow މޮޑިފައިޓަރަށް). ބައި ޑިފޯލްޓް އެއީ 'clippingParents' އަދި ގަބޫލުކުރެވޭނީ އެޗްޓީއެމްއެލްއެލިމެންޓް ރެފަރެންސެއް (އެކަނި ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް) އެވެ. އިތުރު މަޢުލޫމާތު ހޯދުމަށް ޕޮޕަރގެ ޑިޓެކްޓްއޮވަރފްލޯ ޑޮކްސް އަށް ރިޢާޔަތް ކުރައްވާށެވެ . |
customClass |
ސްޓްރިންގް | ފަންކްޝަން | '' |
ޓޫލްޓިޕް ދައްކާއިރު ކްލާސްތައް އިތުރުކުރުން. މި ކްލާސްތައް ޓެމްޕްލޭޓްގައި ކަނޑައެޅިފައިވާ އެއްވެސް ކްލާހެއްގެ އިތުރުން އިތުރުކުރެވޭނެކަން ފާހަގަކޮށްލެވެއެވެ. އެތައް ކްލާހެއް އިތުރުކުރުމަށްޓަކައި، އެ ކްލާސްތައް ވަކިކޮށް ޖާގަ ދީގެން: އަދި އިތުރު ކްލާސް ނަންތައް ހިމެނޭ އެއް ސްޓްރިންގް ރިޓަރން ކުރަންޖެހޭ ފަންކްޝަނެއް ވެސް ޕާސް ކުރެވިދާނެއެވެ. |
sanitize |
ބޫލިއަން އެވެ | true |
ސެނިޓައިޒޭޝަން އެނެބަލް ނުވަތަ ޑިސެބަލް ކުރުން. އެކްޓިވޭޓް ވެއްޖެނަމަ 'template' އަދި 'title' އޮޕްޝަންތައް ސެނިޓައިޒް ކުރެވޭނެއެވެ. އަޅުގަނޑުމެންގެ ޖާވާސްކްރިޕްޓް ޑޮކިއުމަންޓޭޝަންގައިވާ ސެނިޓައިޒާ ބައި ބައްލަވާށެވެ . |
allowList |
އެއްޗެއް | ޑިފޯލްޓް ވެލިއު | ހުއްދަ ލިބިފައިވާ އެޓްރިބިއުޓްތަކާއި ޓެގްތައް ހިމެނޭ އެއްޗެއް |
sanitizeFn |
null | ފަންކްޝަން | null |
މިތަނުން އަމިއްލައަށް ސެނިޓައިޒް ފަންކްޝަން ސަޕްލައި ކުރެވޭނެއެވެ. މިއީ ސެނިޓައިޒޭޝަން ކުރުމަށް ޚާއްޞަ ލައިބްރަރީއެއް ބޭނުން ކުރަން އިސްކަންދޭނަމަ ބޭނުންތެރި ކަމަކަށް ވެދާނެއެވެ. |
offset |
އެރޭ | ސްޓްރިންގް | ފަންކްޝަން | [0, 0] |
ޓޫލްޓިޕް އޭގެ ޓާގެޓަށް ނިސްބަތްކޮށް އޮފްސެޓް ކުރުން. ކޮމާ ވަކިކޮށްފައިވާ އަގުތަކާއެކު ޑޭޓާ އެޓްރިބިއުޓްތަކުގައި ސްޓްރިންގއެއް ޕާސް ކުރެވިދާނެ ފަދައިން: އޮފްސެޓް ކަނޑައެޅުމަށް ފަންކްޝަނެއް ބޭނުންކުރާއިރު، އެއަށް ގޮވަނީ އޭގެ ފުރަތަމަ އަރގިއުމެންޓްގެ ގޮތުގައި ޕޮޕަރ ޕްލޭސްމަންޓާއި، ރެފަރެންސް، އަދި ޕޮޕަރ ރެކްޓްސް ހިމެނޭ އޮބްޖެކްޓަކުންނެވެ. ދެވަނަ އަރގިއުމެންޓްގެ ގޮތުގައި ޓްރިގަރިންގ އެލިމެންޓް ޑީއޯއެމް ނޯޑް ފާސްކުރެއެވެ. ފަންކްޝަނުން ދެ ނަންބަރެއް ހިމެނޭ އެރޭއެއް ރިޓަރން ކުރަން ޖެހެއެވެ: . އިތުރު މަޢުލޫމާތު ހޯދުމަށް ޕޮޕަރގެ އޮފްސެޓް ޑޮކްސް އަށް ރިޢާޔަތް ކުރައްވާށެވެ . |
popperConfig |
null | އެއްޗެއް | ފަންކްޝަން | null |
ބޫޓްސްޓްރެޕްގެ ޑިފޯލްޓް ޕޮޕަރ ކޮންފިގް ބަދަލުކުރުމަށްޓަކައި، ޕޮޕަރގެ ކޮންފިގްރޭޝަން ބައްލަވާށެވެ . ޕޮޕަރ ކޮންފިގްރޭޝަން އުފެއްދުމަށް ފަންކްޝަނެއް ބޭނުންކުރާއިރު، އެއަށް ގޮވަނީ ބޫޓްސްޓްރެޕްގެ ޑިފޯލްޓް ޕޮޕަރ ކޮންފިގްރޭޝަން ހިމެނޭ އޮބްޖެކްޓަކުންނެވެ. އެއީ ޑިފޯލްޓް ބޭނުންކޮށް އަމިއްލަ ކޮންފިގްރޭޝަން އާއި އެއްކޮށްލުމަށް އެހީތެރިވެދޭ އެއްޗެކެވެ. ފަންކްޝަން އިން ޕޮޕަރ އަށް ކޮންފިގްރޭޝަން އޮބްޖެކްޓެއް ރިޓަރން ކުރަން ޖެހެއެވެ. |
ވަކިވަކި ޓޫލްޓިޕްތަކަށް ޑޭޓާ އެޓްރިބިއުޓްސް
ވަކިވަކި ޓޫލްޓިޕްތަކުގެ އިޚްތިޔާރުތައް، މަތީގައި ބަޔާންކޮށްފައިވާ ފަދައިން، ޑޭޓާ އެޓްރިބިއުޓްތައް ބޭނުންކުރުމުގެ ތެރެއިން ބަދަލު ގޮތަކަށް ކަނޑައެޅިދާނެއެވެ.
ފަންކްޝަން ބޭނުންކޮށްގެން ބޭނުންކޮށްގެން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()
ނައްތާލުން
އެލިމެންޓެއްގެ ޓޫލްޓިޕް ފޮރުވައި ނައްތާލައެވެ (ޑޮމް އެލިމެންޓުގައި ރައްކާކޮށްފައިވާ ޑޭޓާ ނައްތާލައެވެ). ޑެލިގޭޝަން ބޭނުންކުރާ ޓޫލްޓިޕްތައް (އެއީ އޮޕްޝަން ބޭނުންކޮށްގެން އުފައްދާފައިވާ ތަކެތިselector
) ޑެސެންޑެންޓް ޓްރިގަރ އެލިމެންޓްތަކުގައި ވަކިވަކިން ނައްތާލެވޭކަށް ނެތެވެ.
tooltip.dispose()
މަގުފަހި
އެލިމެންޓެއްގެ ޓޫލްޓިޕް އަށް ދައްކާނެ ޤާބިލުކަން ލިބިދެއެވެ. ޓޫލްޓިޕްސް ޑިފޯލްޓްކޮށް އެނެބަލް ކޮށްފައި ހުރެއެވެ.
tooltip.enable()
ޑިޒޭބަލް
އެލިމެންޓެއްގެ ޓޫލްޓިޕް ދައްކާނެ ޤާބިލުކަން ނައްތާލައެވެ. ޓޫލްޓިޕް ދައްކާލެވޭނީ އަލުން އެނެބަލް ކޮށްފިނަމައެވެ.
tooltip.disable()
ޓޮގްލްއެނެބަލްޑް
އެލިމެންޓެއްގެ ޓޫލްޓިޕް ދައްކާ ނުވަތަ ފޮރުވުމުގެ ޤާބިލުކަން ޓޮގްލް ކުރެއެވެ.
tooltip.toggleEnabled()
އަޕްޑޭޓް
އެލިމެންޓެއްގެ ޓޫލްޓިޕްގެ މަޤާމު އަޕްޑޭޓް ކުރެއެވެ.
tooltip.update()
ގެޓްއިންސްޓޭންސް
ޑޮމް އެލިމެންޓަކާ ގުޅިފައިވާ ޓޫލްޓިޕް އިންސްޓޭންސް ހޯދުމަށް ފުރުސަތު ލިބޭ ސްޓޭޓިކް މެތޯޑެކެވެ
var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance
ގެޓްއޯރކްރިއޭޓްއިންސްޓޭންސް
ޑޮމް އެލިމެންޓަކާ ގުޅިފައިވާ ޓޫލްޓިޕް އިންސްޓޭންސް ހޯދުމަށް، ނުވަތަ އިނިޝިއަލައިޒް ނުކުރެވުނު ހާލަތެއްގައި އާ އެއްޗެއް އުފެއްދުމުގެ ފުރުސަތު ލިބޭ ސްޓޭޓިކް މެތޯޑެކެވެ
var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance
އިވެންޓްސް
އިވެންޓް ޓައިޕް | ތަފްޞީލު |
---|---|
show.bs.tooltip |
މި އިވެންޓް ވަގުތުން ފަޔަރ ވެގެން ދަނީ show އިންސްޓޭންސް މެތޯޑް ގޮވާލުމުންނެވެ. |
shown.bs.tooltip |
މި އިވެންޓް ފަޔަރ ކުރެވެނީ ޓޫލްޓިޕް ޔޫޒަރަށް ފެންނަ ގޮތަށް ހެދުމުން (ސީއެސްއެސް ޓްރާންސިޝަންތައް ފުރިހަމަވާންދެން މަޑުކުރާނެ) އެވެ. |
hide.bs.tooltip |
މި އިވެންޓް ވަގުތުން ފަޔަރ ކުރެވެނީ hide އިންސްޓޭންސް މެތޯޑަށް ގޮވާ ނިމުމުންނެވެ. |
hidden.bs.tooltip |
މި އިވެންޓް ފަޔަރ ކުރެވެނީ ޓޫލްޓިޕް ޔޫޒަރަށް ފޮރުވުން ނިމުމުން (ސީއެސްއެސް ޓްރާންސިޝަންތައް ފުރިހަމަވާންދެން މަޑުކުރާނެ) އެވެ. |
inserted.bs.tooltip |
މި އިވެންޓް ފަޔަރ ކުރެވެނީ show.bs.tooltip އިވެންޓަށްފަހު ޓޫލްޓިޕް ޓެމްޕްލޭޓް ޑީއޯއެމްއަށް އިތުރުކޮށްފައިވުމުންނެވެ. |
var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)
myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
// do something...
})
tooltip.hide()