Gorsa Meeshaalee

Haala Waliigalaa

Wantoota yeroo tooltip plugin fayyadamtan beekuu qabdan:

• Gorsi meeshaalee ejjennoodhaaf mana kitaabaa qaama sadaffaa Popper irratti hirkatu. Popper.min.js dura dabaluu qabda bootstrap.js, ykn tokko bootstrap.bundle.min.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.

Fakkeenyaaf

Gorsa meeshaalee dandeessisi

Akkuma armaan olitti jedhame, gorsa meeshaalee osoo hin fayyadamin dura jalqabuu qabda. Karaan tokko gorsa meeshaalee hunda fuula tokko irratti jalqabsiisuu danda'an amaloota isaaniitiin filachuu ta'a data-bs-toggle, akkas:

const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

Gorsa meeshaalee hidhaa irratti

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

<p class="muted">Placeholder text to demonstrate some <a href="#" data-bs-toggle="tooltip" data-bs-title="Default tooltip">inline links</a> with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of <a href="#" data-bs-toggle="tooltip" data-bs-title="Another tooltip">real text</a>. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how <a href="#" data-bs-toggle="tooltip" data-bs-title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-bs-toggle="tooltip" data-bs-title="The last tip!">your own</a> site or project.
</p>

Gorsa meeshaalee amala

Jijjiiramoota CSS fayyadamuun mul'ata gorsa meeshaalee dhuunfachuu dandeessa . Mul'ata amala keenyaa bal'isuuf gita amala waliin data-bs-custom-class="custom-tooltip"saagnee jijjiiramaa CSS naannoo irra darbuuf itti fayyadamna.

.custom-tooltip {
  --bs-tooltip-bg: var(--bs-primary);
}

<button type="button" class="btn btn-secondary"
        data-bs-toggle="tooltip" data-bs-placement="top"
        data-bs-custom-class="custom-tooltip"
        data-bs-title="This top tooltip is themed via CSS variables.">
  Custom tooltip
</button>

Kallattii

Kallattiiwwan gorsa meeshaalee afran: gubbaa, mirgaa, jalaa fi bitaa ilaaluuf qaree 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" data-bs-title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-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" data-bs-title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

SVG tokko waliin:

CSS jedhamuun beekama

Jijjiiramoota

Akka qaama mala jijjiiramoota CSS guddachaa jiran Bootstrap, gorsi meeshaalee amma jijjiiramoota CSS naannoo on fayyadama .tooltipdhuunfachiisa yeroo dhugaa fooyya'eef. Gatiin jijjiiramoota CSS karaa Sass qindaa'u, kanaafuu dhuunfachiisuun Sass ammallee ni deeggarama, akkasumas.

  --#{$prefix}tooltip-zindex: #{$zindex-tooltip};
  --#{$prefix}tooltip-max-width: #{$tooltip-max-width};
  --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
  --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
  --#{$prefix}tooltip-margin: #{$tooltip-margin};
  @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
  --#{$prefix}tooltip-color: #{$tooltip-color};
  --#{$prefix}tooltip-bg: #{$tooltip-bg};
  --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
  --#{$prefix}tooltip-opacity: #{$tooltip-opacity};
  --#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
  --#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
  

Jijjiiramoota Sass

$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:                    null; // TODO: remove this in v6

$tooltip-arrow-width:               .8rem;
$tooltip-arrow-height:              .4rem;
// fusv-disable
$tooltip-arrow-color:               null; // Deprecated in Bootstrap 5.2.0 for CSS variables
// fusv-enable

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:

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

const tooltip = new bootstrap.Tooltip('#example', {
  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" data-bs-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" data-bs-title="Disabled tooltip">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

Filannoowwan

Filannoon karaa amaloota deetaa ykn JaavaScript darbuu waan danda'uuf, maqaa filannoo gara data-bs-, akka keessatti dabaluu dandeessa data-bs-animation="{value}". Yeroo filannoowwan karaa amaloota deetaa dabarsitu akaakuu keesii maqaa filannoo “ camelCase ” irraa gara “ kebab-case ” jijjiiruu kee mirkaneessi. Fakkeenyaaf, data-bs-custom-class="beautifier"bakka data-bs-customClass="beautifier".

Bootstrap 5.2.0 irraa eegalee, qaamolee hundi amaloota deetaa yaaliidata-bs-config eegame kan qindeessaa qaama salphaa akka tarree JSON qabachuu danda'u deeggaru. Yeroo qaamni tokko amaloota data-bs-config='{"delay":0, "title":123}'fi qabu data-bs-title="456", gatii dhumaa titleta'a 456fi amaloonni deetaa adda addaa gatiiwwan irratti kennaman irra darbu data-bs-config. Dabalataan, amaloonni deetaa jiran gatiiwwan JSON akka data-bs-delay='{"show":0,"hide":150}'.

Faankishinii waliin fayyadamuupopperConfig

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

Malawwan

const tooltip = bootstrap.Tooltip.getInstance('#example') // Returns a Bootstrap tooltip instance

// setContent example
tooltip.setContent({ '.tooltip-inner': 'another title' })

Taateewwan

const myTooltipEl = document.getElementById('myTooltip')
const tooltip = bootstrap.Tooltip.getOrCreateInstance(myTooltipEl)

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

tooltip.hide()