ޓޫލްޓިޕްސް
އެނިމޭޝަންތަކަށް ސީއެސްއެސް3 ބޭނުންކޮށްގެން ސީއެސްއެސް އަދި ޖާވާސްކްރިޕްޓާއެކު ކަސްޓަމް ބޫޓްސްޓްރަޕް ޓޫލްޓިޕްސް އިތުރުކުރުމަށް ލިޔެކިޔުންތަކާއި މިސާލުތައް އަދި ލޯކަލް ޓައިޓަލް ސްޓޯރޭޖަށް ޑޭޓާ-އެޓްރިބިއުޓްސް.
އޯވަރވިއު
ޓޫލްޓިޕް ޕްލަގިން ބޭނުންކުރާއިރު އެނގެން ޖެހޭ ކަންތައްތައް:
- ޓޫލްޓިޕްސް ޕޮޒިޝަން ކުރުމަށް ބަރޯސާވެފައިވަނީ 3 ވަނަ ފަރާތުގެ ލައިބްރަރީ ޕޮޕަރ އަށެވެ. ޓޫލްޓިޕްސް މަސައްކަތް ކުރުމަށްޓަކައި bootstrap.js ގެ ކުރިން popper.min.js ހިމަނަން ނުވަތަ ޕޮޕަރ ހިމެނޭ
bootstrap.bundle.min.js
/ ބޭނުން ކުރަން ޖެހެއެވެ!bootstrap.bundle.js
- އަޅުގަނޑުމެންގެ ޖާވާސްކްރިޕްޓް ބިލްޑިންގ ފްރޮމް ސޯސް ނަމަ، އެއަށް ބޭނުންވަނީ
util.js
. - ޓޫލްޓިޕްސް އަކީ ޕާފޯމަންސް ސަބަބުތަކާހުރެ އޮޕްޓް-އިން އެއްޗެއް ކަމުން އަމިއްލައަށް އިނިޝިއަލައިޒް ކުރަން ޖެހެއެވެ .
- ޒީރޯ ދިގުމިނުގެ ސުރުޚީތައް ހުންނަ ޓޫލްޓިޕްތައް ދުވަހަކުވެސް ނުފެނެއެވެ.
container: 'body'
މިއަށްވުރެ ކޮމްޕްލެކްސް ކޮމްޕޯނެންޓްތަކުގައި (އަޅުގަނޑުމެންގެ އިންޕުޓް ގްރޫޕްތަކާއި، ބަޓަން ގްރޫޕްތައް ފަދަ) ރެންޑަރިންގ މައްސަލަތަކުން ސަލާމަތްވުމަށް ކަނޑައަޅާށެވެ .- ފޮރުވިފައިވާ އެލިމެންޓްތަކުގެ މައްޗަށް ޓޫލްޓިޕްސް ޓްރިގަރ ކުރުމުން ފައިދާއެއް ނުވާނެއެވެ.
- ޓޫލްޓިޕްސް ފޯރ
.disabled
ނުވަތަdisabled
އެލިމެންޓްސް ޓްރިގަރ ކުރަންވާނީ ރެޕަރ އެލިމެންޓެއްގެ މައްޗަށެވެ. - އެތައް ލައިނެއް ފުޅާވެފައިވާ ހައިޕަރލިންކްތަކުން ޓްރިގަރ ކުރާއިރު، ޓޫލްޓިޕްސް ސެންޓަރ ވާނެއެވެ. މި ސުލޫކުން ސަލާމަތްވުމަށްޓަކައި
white-space: nowrap;
އޮން ޔޫއާރ ސް ބޭނުން ކުރާށެވެ .<a>
- ޓޫލްޓިޕްތައް ފޮރުވަން ޖެހޭނީ އެތަކެތީގެ އެލިމެންޓްތައް ޑީއޯއެމް އިން ނައްތާލުމުގެ ކުރިންނެވެ.
- ޓޫލްޓިޕްސް ޓްރިގަރ ކުރެވޭނީ ޝެޑޯ ޑޮމް އެއްގެ ތެރޭގައި ހުންނަ އެލިމެންޓެއްގެ ސަބަބުންނެވެ.
prefers-reduced-motion
މީޑިއާ ކިއުއަރީގެ މައްޗަށެވެ. އަޅުގަނޑުމެންގެ އެކްސެސިބިލިޓީ ޑޮކިއުމަންޓޭޝަންގެ ރިޑޫސްޑް މޮޝަން ބައި ބައްލަވާށެވެ
.
އެ ހުރިހާ ކަމެއް ލިބިއްޖެތަ؟ މޮޅު، ބައެއް މިސާލުތަކާއެކު އެމީހުން މަސައްކަތްކުރާ ގޮތް ބަލާލަމާ ހިނގާށެވެ.
މިސާލު: ހުރިހާ ތަނެއްގައި ޓޫލްޓިޕްސް އެނެބަލް ކުރުން
ޕޭޖެއްގައި ހުރި ހުރިހާ ޓޫލްޓިޕްތަކެއް އިނިޝިއަލައިޒް ކުރެވޭނެ އެއް ގޮތަކީ އެ ޓޫލްޓިޕްތަކުގެ data-toggle
އެޓްރިބިއުޓް އަށް ބަލައިގެން އެ ޓޫލްޓިޕްތައް ހޮވުމެވެ:
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
މިސާލުތަކެވެ
ޓޫލްޓިޕްސް ބަލާލުމަށް ތިރީގައިވާ ލިންކްތަކުގެ މައްޗަށް ހޯވަރ ކޮށްލައްވާ:
ޓޫލްޓިޕްތަކާއެކު ބައެއް އިންލައިން ލިންކްތައް ދައްކާލުމަށް ޕްލޭސްހޯލްޑަރ ޓެކްސްޓް . މިއީ މިހާރު ހަމައެކަނި ފިލާއެއް، ކިލަރއެއް ނެތް. ކޮންޓެންޓް މިތަނުގައި ބަހައްޓާފައިވަނީ ހަމައެކަނި ހަގީގީ ލިޔުމެއްގެ ޙާޟިރީ ނަކަލު ކުރުމަށްޓަކައެވެ . އަދި އެ ހުރިހާ ކަމެއް ހަމައެކަނި ތިބާއަށް ޙަޤީޤީ ދުނިޔޭގެ ޙާލަތްތަކުގައި ބޭނުންކުރާއިރު ޓޫލްޓިޕްތައް ފެންނާނެ ގޮތުގެ ޚިޔާލެއް ދިނުމަށްޓަކައެވެ. އެހެންވީމާ އިރާދަކުރެއްވިއްޔާ މިހާރު ތިޔަބޭފުޅުންނަށް ފެނިވަޑައިގެންފައިވާނެ ލިންކްތަކުގައިވާ މި ޓޫލްޓިޕްތައް އަމަލީ ގޮތުން މަސައްކަތް ކުރެވޭނެ ގޮތް، އެއްފަހަރު އަމިއްލަ ސައިޓެއްގައި ނުވަތަ ޕްރޮޖެކްޓެއްގައި އެ ޓޫލްޓިޕްތައް ބޭނުން ކުރެއްވުމުން .
ތިރީގައިވާ ބަޓަންތަކުގެ މައްޗަށް ހޯވަރ ކޮށްލުމުން ޓޫލްޓިޕްސްގެ ހަތަރު މިސްރާބު ފެންނާނެއެވެ: މަތީ، ވާތް، ތިރީ، އަދި ވާތު.
<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>
އަދި ކަސްޓަމް އެޗްޓީއެމްއެލް އިތުރުކޮށްގެން:
<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>
ބޭނުން ކުރުން
ޓޫލްޓިޕް ޕްލަގިން އިން ޑިމާންޑް ކުރުމުން ކޮންޓެންޓާއި މާކަޕް އުފައްދައި، ޑިފޯލްޓްކޮށް ޓޫލްޓިޕްތައް އެމީހުންގެ ޓްރިގަރ އެލިމެންޓްގެ ފަހަތުގައި ބެހެއްޓޭނެއެވެ.
ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް ޓޫލްޓިޕް ޓްރިގަރ ކުރާށެވެ:
$('#example').tooltip(options)
އޯވަރފްލޯ auto
އާއި ...scroll
ޓޫލްޓިޕް ޕޮޒިޝަން އޮޓޮމެޓިކުން ބަދަލުވާން މަސައްކަތް ކުރަނީ ބެލެނިވެރި ކޮންޓެއިނަރެއްގައި އަޅުގަނޑުމެންގެ overflow: auto
, އެކަމަކު އަދިވެސް އަސްލު ޕްލޭސްމަންޓްގެ ޕޮޒިޝަން ބެހެއްޓޭ. ހައްލުކުރުމަށްޓަކައި، ޑިފޯލްޓް ވެލިއު ނޫން އެހެން އެއްޗަކަށް އިޚްތިޔާރު ސެޓްކުރުން، , ފަދައިން :overflow: scroll
.table-responsive
boundary
'scrollParent'
'window'
$('#example').tooltip({ boundary: 'window' })
މާކަޕް
ޓޫލްޓިޕަކަށް ބޭނުންވާ މާކަޕަކީ ހަމައެކަނި data
އެޓްރިބިއުޓެއް ކަމަށާއި title
އެޗްޓީއެމްއެލް އެލިމެންޓްގައި ޓޫލްޓިޕް އެއް ހުންނަން ބޭނުންވާ ކަމަށް ވެސް ވިދާޅުވި އެވެ. ޓޫލްޓިޕްގެ ޖެނެރޭޓް ކުރެވޭ މާކަޕް އަކީ ތަންކޮޅެއް ސާދާ އެއްޗެއް ނަމަވެސް، އެއަށް ޕޮޒިޝަނެއް ބޭނުންވާ ނަމަވެސް (ޑިފޯލްޓްކޮށް، top
ޕްލަގިން އިން ސެޓް ކޮށްފައި ހުންނަނީ) އެވެ.
ކީބޯޑާއި އެސިސްޓިވް ޓެކްނޮލޮޖީ ބޭނުންކުރާ ފަރާތްތަކަށް ޓޫލްޓިޕްސް ފައިދާހުރި ގޮތަކަށް ހެދުން
އެޗްޓީއެމްއެލް އެލިމެންޓްތަކަށް އިތުރުކުރަންވާނީ ހަމައެކަނި ސަގާފީ ގޮތުން ކީބޯޑަށް ފޯކަސް ކުރެވޭ އަދި އިންޓަރެކްޓިވް (ލިންކް ނުވަތަ ފޯމް ކޮންޓްރޯލް ފަދަ) އެލިމެންޓްތަކަށެވެ. އެޓްރިބިއުޓް އިތުރުކޮށްގެން އަމިއްލައަށް އެޗްޓީއެމްއެލް އެލިމެންޓްތައް ( <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>
އިޚްތިޔާރުތައް
ޑޭޓާ އެޓްރިބިއުޓްސް ނުވަތަ ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް އޮޕްޝަންތައް ޕާސް ކުރެވޭނެ އެވެ. ޑޭޓާ އެޓްރިބިއުޓްތަކަށް، data-
ގައިވާ ފަދައިން، އޮޕްޝަން ނަން އަށް އިތުރުކުރުން data-animation=""
.
sanitize
,
sanitizeFn
އަދި
whiteList
އޮޕްޝަންތައް ސަޕްލައި ނުކުރެވޭނެކަން ފާހަގަކޮށްލެވެއެވެ.
ނަން | ވައްތަރު | ޑީފޯލްޓް | ތަފްޞީލު |
---|---|---|---|
އެނިމޭޝަން އެވެ | ބޫލިއަން އެވެ | ރަނގަޅު | ޓޫލްޓިޕް އަށް ސީއެސްއެސް ފޭޑް ޓްރާންސިޝަން އެއް އެޕްލައި ކުރާށެވެ |
ކޮންޓެއިނަރެވެ | ސްޓްރިންގް | އެލިމެންޓް | ރަނގަޅުނޫން | ރަނގަޅުނޫން | ވަކި އެލިމެންޓަކަށް ޓޫލްޓިޕް އިތުރުކުރެއެވެ. މިސާލު: |
ލަސްވުން | ނަންބަރު | އެއްޗެއް | 0 | ޓޫލްޓިޕް ދައްކައި ފޮރުވުން ލަސްކުރުން (ms) - މެނުއަލް ޓްރިގަރ ޓައިޕް އަށް ނުހިނގާނެއެވެ ނަންބަރެއް ފޯރުކޮށްދީފިނަމަ، ފޮރުވާ/ދައްކާ ދެ ގޮތަށް ވެސް ޑިލޭ ޖަހައެވެ އެއްޗެއްގެ އޮނިގަނޑަކީ: |
html އެވެ | ބޫލިއަން އެވެ | ރަނގަޅުނޫން | ޓޫލްޓިޕްގައި އެޗްޓީއެމްއެލް އަށް ހުއްދަ ދޭށެވެ. ތެދެއްނަމަ ޓޫލްޓިޕްގެ އެޗްޓީއެމްއެލް ޓެގްތައް ޓޫލްޓިޕްގައި އެކްސްއެސްއެސް ހަމަލާތަކާ މެދު ކަންބޮޑުވާނަމަ ޓެކްސްޓް ބޭނުން ކުރާށެވެ. |
ޕްލޭސްމަންޓް | ސްޓްރިންގް | ފަންކްޝަން | 'މަތި' | ޓޫލްޓިޕް ޕޮޒިޝަން ކުރާނެ ގޮތް - އޮޓޯ | މަތީގައި | ތިރީގައި | ކަނާތްފަރާތުން | ކަނާތް. ކަނޑައެޅިއްޖެނަމަ، އެއީ ޑައިނަމިކް ގޮތެއްގައި ޓޫލްޓިޕް ރީއޮރިއެންޓް ކުރާނެއެވެ ޕްލޭސްމަންޓް ކަނޑައެޅުމަށް ފަންކްޝަނެއް ބޭނުންކުރާއިރު، އެ ފަންކްޝަނަށް ގޮވާލަނީ އޭގެ ފުރަތަމަ އަރގިއުމެންޓްގެ ގޮތުގައި ޓޫލްޓިޕް ޑީއޯއެމް ނޯޑް އަދި ދެވަނަ އަރގިއުމެންޓްގެ ގޮތުގައި ޓްރިގަރިންގ އެލިމެންޓް ޑީއޯއެމް ނޯޑް ހިފައިގެންނެވެ. ކޮންޓެކްސްޓް |
ސެލެކްޓަރ އެވެ | ސްޓްރިންގް | ރަނގަޅުނޫން | ރަނގަޅުނޫން | ސެލެކްޓަރެއް ފޯރުކޮށްދީފިނަމަ، ޓޫލްޓިޕް އޮބްޖެކްޓްތައް ކަނޑައެޅިފައިވާ ޓާގެޓްތަކަށް ޑެލިގޭޓް ކުރެވޭނެއެވެ. ޢަމަލީގޮތުން ބަލާއިރު، މިއީ ޑައިނަމިކް ގޮތެއްގައި އިތުރުކުރެވޭ ޑީއޯއެމް އެލިމެންޓްތަކަށް ( jQuery.on ސަޕޯޓް) ޓޫލްޓިޕްސް ވެސް އަމަލުކުރުމަށް ބޭނުންކުރާ އެއްޗެކެވެ. މިކަމާއި މަޢުލޫމާތު ގިނަ މިސާލެއް ބައްލަވާށެވެ . |
ޓެމްޕްލޭޓް | ސްޓްރިންގ | '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' |
ޓޫލްޓިޕް އުފައްދާއިރު ބޭނުންކުރާނެ އެޗްޓީއެމްއެލް ބޭސްކުރުން. ޓޫލްޓިޕްގެ
އެންމެ ބޭރުގައި ހުންނަ ރެޕަރ އެލިމެންޓްގައި |
މަޤާމު | ސްޓްރިންގް | އެލިމެންޓް | ފަންކްޝަން | '' އެވެ. |
ފަންކްޝަނެއް ދީފިނަމަ، އެއަށް ގޮވާނީ އޭގެ |
ކަމެއްވުމަށް މެދުވެރިވާ ސަބަބު | ސްޓްރިންގ | 'ހޯވަރ ފޯކަސް'. | ޓޫލްޓިޕް ޓްރިގަރ ކުރާ ގޮތް - | ހޯވަރ ކުރާށެވެ | ފޯކަސް | މެނުއަލް. އެތައް ޓްރިގަރެއް ފާސްވެދާނެ؛ އެތަކެތި ވަކިކޮށް ޖާގައެއް ދީގެންނެވެ.
|
އޮފްސެޓް ކޮށްލާށެވެ | ނަންބަރު | ސްޓްރިންގް | ފަންކްޝަން | 0 | ޓޫލްޓިޕް އޭގެ ޓާގެޓަށް ނިސްބަތްކޮށް އޮފްސެޓް ކުރުން. އޮފްސެޓް ކަނޑައެޅުމަށް ފަންކްޝަނެއް ބޭނުންކުރާއިރު، އޭގެ ފުރަތަމަ އަރގިއުމެންޓްގެ ގޮތުގައި އޮފްސެޓް ޑޭޓާ ހިމެނޭ އޮބްޖެކްޓަކާއެކު ގޮވާލައެވެ. ފަންކްޝަނުން އެއް ސްޓްރަކްޗަރ އެއް އޮންނަ އެއްޗެއް ރިޓަރން ކުރަން ޖެހެއެވެ. ދެވަނަ އަރގިއުމެންޓްގެ ގޮތުގައި ޓްރިގަރިންގ އެލިމެންޓް ޑީއޯއެމް ނޯޑް ފާސްކުރެއެވެ. އިތުރު މަޢުލޫމާތު ހޯދުމަށް ޕޮޕަރގެ އޮފްސެޓް ޑޮކްސް އަށް ރިޢާޔަތް ކުރައްވާށެވެ . |
fallbackޕްލޭސްމަންޓް | ސްޓްރިންގް | އެރޭ އެވެ | 'ފުށުންޖެހުން' | ފޯލްބެކްގައި ޕޮޕަރ ބޭނުންކުރާނީ ކޮން މަޤާމެއްކަން ކަނޑައެޅުމަށް ހުއްދަ ދޭށެވެ. އިތުރު މަޢުލޫމާތު ހޯދުމަށް ޕޮޕަރގެ ބިހޭވިއަރ ޑޮކްސް އަށް ރިޢާޔަތް ކުރައްވާށެވެ |
ކަސްޓަމްކްލާސް އެވެ | ސްޓްރިންގް | ފަންކްޝަން | '' އެވެ. | ޓޫލްޓިޕް ދައްކާއިރު ކްލާސްތައް އިތުރުކުރުން. މި ކްލާސްތައް ޓެމްޕްލޭޓްގައި ކަނޑައެޅިފައިވާ އެއްވެސް ކްލާހެއްގެ އިތުރުން އިތުރުކުރެވޭނެކަން ފާހަގަކޮށްލެވެއެވެ. އެތައް ކްލާހެއް އިތުރުކުރުމަށްޓަކައި، އެ ކްލާސްތައް ވަކިކޮށް ޖާގަ ދީގެން: އަދި އިތުރު ކްލާސް ނަންތައް ހިމެނޭ އެއް ސްޓްރިންގް ރިޓަރން ކުރަންޖެހޭ ފަންކްޝަނެއް ވެސް ޕާސް ކުރެވިދާނެއެވެ. |
ބައުންޑަރީ އެވެ | ސްޓްރިންގް | އެއްޗެއްގެ ބައެއް | 'ސްކްރޯލްޕޭރެންޓް' އެވެ. | ޓޫލްޓިޕްގެ އޯވަރފްލޯ ކޮންސްޓްރެއިންޓް ބައުންޑަރީ. 'viewport' , 'window' , 'scrollParent' , ނުވަތަ HTMLElement ރެފަރެންސެއް (އެކަނި ޖާވާސްކްރިޕްޓް) ގެ އަގުތައް ބަލައިގަންނައެވެ . އިތުރު މަޢުލޫމާތު ހޯދުމަށް ޕޮޕަރގެ preventOverflow ޑޮކްސް އަށް ރިޢާޔަތް ކުރައްވާށެވެ . |
ސެނިޓައިޒް ކުރުން | ބޫލިއަން އެވެ | ރަނގަޅު | ސެނިޓައިޒޭޝަން އެނެބަލް ނުވަތަ ޑިސެބަލް ކުރުން. އެކްޓިވޭޓް ވެއްޖެނަމަ 'template' އަދި 'title' އޮޕްޝަންތައް ސެނިޓައިޒް ކުރެވޭނެއެވެ. އަޅުގަނޑުމެންގެ ޖާވާސްކްރިޕްޓް ޑޮކިއުމަންޓޭޝަންގައިވާ ސެނިޓައިޒާ ބައި ބައްލަވާށެވެ . |
ވައިޓްލިސްޓް | އެއްޗެއް | ޑިފޯލްޓް ވެލިއު | ހުއްދަ ލިބިފައިވާ އެޓްރިބިއުޓްތަކާއި ޓެގްތައް ހިމެނޭ އެއްޗެއް |
ސެނިޓައިޒްކުރުންFn | null | ފަންކްޝަން | null އެވެ | މިތަނުން އަމިއްލައަށް ސެނިޓައިޒް ފަންކްޝަން ސަޕްލައި ކުރެވޭނެއެވެ. މިއީ ސެނިޓައިޒޭޝަން ކުރުމަށް ޚާއްޞަ ލައިބްރަރީއެއް ބޭނުން ކުރަން އިސްކަންދޭނަމަ ބޭނުންތެރި ކަމަކަށް ވެދާނެއެވެ. |
ޕޮޕަރކޮންފިގް | null | އެއްޗެއް | null އެވެ | ބޫޓްސްޓްރެޕްގެ ޑިފޯލްޓް ޕޮޕަރ ކޮންފިގް ބަދަލުކުރުމަށްޓަކައި، ޕޮޕަރގެ ކޮންފިގްރޭޝަން ބައްލަވާށެވެ |
ވަކިވަކި ޓޫލްޓިޕްތަކަށް ޑޭޓާ އެޓްރިބިއުޓްސް
ވަކިވަކި ޓޫލްޓިޕްތަކުގެ އިޚްތިޔާރުތައް، މަތީގައި ބަޔާންކޮށްފައިވާ ފަދައިން، ޑޭޓާ އެޓްރިބިއުޓްތައް ބޭނުންކުރުމުގެ ތެރެއިން ބަދަލު ގޮތަކަށް ކަނޑައެޅިދާނެއެވެ.
ގޮތްތައް
އެސިންކްރޮނަސް މެތޯޑްސް އާއި ޓްރާންސިޝަންސް
ހުރިހާ އެޕީއައި މެތޯޑްތަކަކީ އެސިންކްރޮނަސް މެތޯޑްތަކެއް ކަމުން ޓްރާންސިޝަނެއް ފެށެއެވެ . އެމީހުން އެނބުރި ގުޅާ މީހާއަށް ޓްރާންސިޝަން ފެށުނުހާ އަވަހަކަށް އެކަމަކު ނިމުމުގެ ކުރިން . މީގެ އިތުރުން ޓްރާންސިޝަން ކޮމްޕޮނެންޓެއްގައި މެތޯޑް ކޯލެއް ކުރާނަމަ އަޅާނުލެވޭނެއެވެ .
އިތުރު މަޢުލޫމާތު ހޯދުމަށް އަޅުގަނޑުމެންގެ ޖާވާސްކްރިޕްޓް ޑޮކިއުމަންޓޭޝަން ބައްލަވާށެވެ .
$().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.tooltip | މި އިވެންޓް ފަޔަރ ކުރެވެނީ ޓޫލްޓިޕް ޔޫޒަރަށް ފެންނަ ގޮތަށް ހެދުމުން (ސީއެސްއެސް ޓްރާންސިޝަންތައް ފުރިހަމަވާންދެން މަޑުކުރާނެ) އެވެ. |
hide.bs.ޓޫލްޓިޕް | މި އިވެންޓް ވަގުތުން ފަޔަރ ކުރެވެނީ hide އިންސްޓޭންސް މެތޯޑަށް ގޮވާ ނިމުމުންނެވެ. |
ފޮރުވިފައިވާ.ބީއެސް.ޓޫލްޓިޕް | މި އިވެންޓް ފަޔަރ ކުރެވެނީ ޓޫލްޓިޕް ޔޫޒަރަށް ފޮރުވުން ނިމުމުން (ސީއެސްއެސް ޓްރާންސިޝަންތައް ފުރިހަމަވާންދެން މަޑުކުރާނެ) އެވެ. |
އިންސަރޓެޑް.ބީއެސް.ޓޫލްޓިޕް | މި އިވެންޓް ފަޔަރ ކުރެވެނީ show.bs.tooltip އިވެންޓަށްފަހު ޓޫލްޓިޕް ޓެމްޕްލޭޓް ޑީއޯއެމްއަށް އިތުރުކޮށްފައިވުމުންނެވެ. |
$('#myTooltip').on('hidden.bs.tooltip', function () {
// do something...
})