Gorsa Meeshaalee

Haala Waliigalaa

Wantoota yeroo tooltip plugin fayyadamtan beekuu qabdan:

• Tooltips ejjennoodhaaf mana kitaabaa qaama 3ffaa Popper irratti hirkatu. Gorsi meeshaa akka hojjetuuf bootstrap.js dura popper.min.js dabaluu qabda ykn bootstrap.bundle.min.js/ bootstrap.bundle.jskan Popper of keessaa qabu fayyadamuu qabda!
• Gorsi meeshaalee sababa raawwii hojiitiin filachuudha, kanaaf ofii keetii jalqabuu qabda .
• Gorsi meeshaa mata dureewwan dheerina zeeroo qaban gonkumaa hin agarsiifaman.
• container: 'body'Qaamolee walxaxaa ta'an keessatti (akka gareewwan galtee keenyaa, gareewwan qaree fi kkf) keessatti rakkoolee agarsiisuu akka hin uumamneef ifteessi .
• Qaamolee dhokatan irratti gorsa meeshaa kakaasuun hin hojjetu.
• Gorsi meeshaa .disabledykn disabledelementoota elementii marfataa irratti kakaafamuu qabu.
• Yeroo haayperliinkii sararoota hedduu dabarsan irraa kakaafamu, gorsi meeshaa giddugaleessa ta'a. Amala kana irraa of eeguuf s white-space: nowrap;kee irratti fayyadami .<a>
• Gorsi meeshaa osoo elementoonni isaanii walgitan DOM irraa hin haqamin dura dhokachuu qabu.
• Gorsi meeshaa galata elementii DOM golboo keessa jiruun kakaafamuu danda'a.

Sana hunda argatte? Guddaa dha, fakkeenya tokko tokkoon akkamitti akka hojjetan haa ilaallu.

Fakkeenya: Gorsa meeshaalee bakka hundatti dandeessisi

data-bs-toggleKaraan tokko gorsa meeshaalee hunda fuula tokko irratti jalqabsiisuu amaloota isaaniitiin filachuu ta'a :

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

Fakkeenyaaf

Gorsa meeshaalee ilaaluuf hidhannoowwan armaan gadii irratti harka kaa'i:

Kallattiiwwan gorsa meeshaa afran: gubbaa, mirgaa, jalaa fi bitaa ilaaluuf qareewwan armaan gadii irratti harka kaa'i. Kallattiiwwan yeroo Bootstrap RTL keessatti fayyadamtu calaqqisiifama.

<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>

Akkasumas HTML amala dabalamee wajjin:

<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 tokko waliin:

Sass jedhama

Jijjiiramoota

$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;

Fayyadama

Ijaarsi gorsa meeshaa qabiyyee fi mallattoo gaaffii irratti maddisiisa, akkasumas durtii gorsa meeshaa qaama kaka'umsaa isaanii booda kaa'a.

Gorsa meeshaa karaa JaavaScript kakaasi:

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
  boundary: document.body // or document.querySelector('#boundary')
})

Markup gochuu

Mallattoon barbaachisu gorsa meeshaa dataamaloota qofa yoo titleta'u qaama HTML irratti gorsa meeshaa qabaachuu barbaadda. Mallattoon gorsa meeshaa uumame baay'ee salphaadha, haa ta'u malee bakka barbaada (durtiidhaan, ifteessaadhaan saagi top).

<!-- 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>

Qaamolee hanqifaman

Qaamonni disabledamaloota qaban wal-qunnamsiisoo miti, jechuun fayyadamtoonni xiyyeeffannoo, hover, ykn cuqaasuun gorsa meeshaa (ykn popover) kakaasuu hin danda'an. Akka furmaataatti, gorsa meeshaa marfata irraa kakaasuu barbaadda , <div>akka <span>gaariitti fayyadamuun kiiboordii irratti xiyyeeffachuu tabindex="0"danda'a.

<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>

Filannoowwan

Filannoon karaa amaloota deetaa ykn JaavaScript darbuu danda'u. Amaloota deetaatiif, maqaa filannoo gara data-bs-, akkuma keessatti dabali data-bs-animation="". Yeroo filannoowwan karaa amaloota deetaa dabarsitu akaakuu keesii maqaa filannoo camelCase irraa gara kebab-case jijjiiruu mirkaneessi. Fakkeenyaaf, fayyadamuu mannaa data-bs-customClass="beautifier", fayyadami data-bs-custom-class="beautifier".

Faankishinii waliin fayyadamuupopperConfig

var tooltip = new bootstrap.Tooltip(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

Malawwan

agarsiisuu

Gorsa meeshaa elementii tokkoo mul'isa. Osoo gorsi meeshaa qabatamaan hin agarsiifamiin dura gara waamichaatti deebi'a (jechuunis osoo shown.bs.tooltiptaatee hin uumamin dura). Kunis akka “harkaan” kakaasuu tooltip ta’ee fudhatama. Gorsi meeshaa mata dureewwan dheerina zeeroo qaban gonkumaa hin agarsiifaman.

tooltip.show()

dhoksuu

Gorsa meeshaa elementii dhoksa. Osoo gorsi meeshaa qabatamaan hin dhokatiin (jechuun osoo taatee hin uumamin dura) gara waamichaatti deebi'a . hidden.bs.tooltipKunis akka “harkaan” kakaasuu tooltip ta’ee fudhatama.

tooltip.hide()

toggle jechuun ni danda'ama

Gorsa meeshaa qaama tokkoo jijjiira. Gara waamichaatti deebi'a osoo gorsi meeshaa qabatamaan hin agarsiifamin ykn hin dhokatiin (jechuunis osoo taatee shown.bs.tooltipykn hin uumamin dura hidden.bs.tooltip). Kunis akka “harkaan” kakaasuu tooltip ta’ee fudhatama.

tooltip.toggle()

gatuu

Gorsa meeshaa qaama tokkoo dhoksuu fi balleessa (Deetaa qaama DOM irratti kuufame haqa). Gorsi meeshaalee bakka bu'iinsa fayyadaman ( kanneen selectorfilannoo fayyadamuun uumaman ) qaamolee kaka'umsaa sanyii irratti dhuunfaan balleessuu hin danda'an.

tooltip.dispose()

dandeessisuu

Dandeettii agarsiisuuf tooltip elementii kenna. Gorsi meeshaalee durtiidhan dandeessifama.

tooltip.enable()

akka hin hojjenne gochuu

Dandeettii gorsa meeshaa elementii agarsiisuuf haqa. Gorsi meeshaa agarsiisuu kan danda'u yoo irra deebi'amee dandeessifame qofa.

tooltip.disable()

toggleDandeessifame

Dandeettii gorsa meeshaa qaama tokkoo akka agarsiifamu ykn dhokfamuuf jijjiira.

tooltip.toggleEnabled()

odeeffannoo dhiyeenyaa

Bakka gorsa meeshaa qaama tokkoo fooyyessa.

tooltip.update()

Fakkeenya argadhu

Mala istaatiksii kan fakkeenya gorsa meeshaa qaama DOM waliin walqabate argachuuf si dandeessisu

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

Fakkeenya argadhuYknUumi

Mala istaatiksii kan fakkeenya gorsa meeshaa qaama DOM waliin walqabate argachuuf si dandeessisu, ykn yoo hin jalqabne haaraa uumuuf si dandeessisu

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

Taateewwan

var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)

myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
  // do something...
})

tooltip.hide()