Tilmaamaha Qalabka

Dulmar

Waxyaabaha ay tahay in la ogaado marka la isticmaalayo Tooltip plugin:

• Tilmaamaha qalabku waxay ku tiirsan yihiin qaybta saddexaad ee maktabadda Popper si loo meeleeyo. Waa inaad ku darto popper.min.js ka hor bootstrap.js, ama isticmaal mid ka bootstrap.bundle.min.jskooban Popper.
• Tilmaamaha aaladaha ayaa loo gatay sababo waxqabad dartood, marka waa inaad adigu bilowdaa .
• Tilmaamaha qalabka leh cinwaanno eber ah weligood lama soo bandhigin.
• Qeex container: 'body'si aad uga fogaato soo jeedinta dhibaatooyinka qaybo badan oo kakan (sida kooxahayada wax gelinta, kooxaha badhanka, iwm).
• Qalab kicinta walxaha qarsoon ma shaqayn doonaan.
• Tilmaamaha aaladaha .disabledama disabledwalxaha waa in lagu kiciyaa curiyaha duubka ah.
• Marka laga soo kiciyo hyperlinks kuwaas oo fidsan xariiqyo badan, tabaha aaladaha ayaa dhexda u ahaan doona. Isticmaal s si white-space: nowrap;aad <a>uga fogaato dhaqankan.
• Tilmaamaha qalabka waa in la qariyaa ka hor inta aan laga saarin walxaha u dhigma ee DOM.
• Tilmaamaha aaladaha waa la kicin karaa iyada oo ay ugu wacan tahay shay ku jira hadhka DOM.

Waxaas oo dhan ma helay? Way fiicantahay, aan aragno sida ay ula shaqeeyaan tusaalooyinka qaar.

Tusaalooyinka

Daar tabaha aaladaha

Sida kor ku xusan, waa in aad bilawdo qalabyada ka hor inta aan la isticmaalin. Hal dariiqo oo lagu bilaabi karo dhammaan aaladaha bogga ayaa ah in lagu xusho data-bs-togglesifadooda, sida:

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

Tilmaamaha ku saabsan isku xirka

Ka dul rog xiriirka hoose si aad u aragto qalabyada:

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

Aaladaha gaarka ah

Waxaad ku habeyn kartaa muuqaalka aaladaha aaladaha adoo isticmaalaya doorsoomayaasha CSS . Waxaan dejinay fasal gaar ah data-bs-custom-class="custom-tooltip"si aan u cabbirno muuqaalkayaga caadada ah oo aan u isticmaalno si aan uga gudubno doorsoomaha CSS-ga maxalliga ah.

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

Tilmaamaha

Dul bood badhamada hoose si aad u aragto afarta tilmaamood ee tilmaamaha: sare, midig, hoose, iyo bidix. Tilmaamaha waa la milicsadaa marka la isticmaalayo Bootstrap gudaha RTL.

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

Iyo HTML caadadii lagu daray:

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

Sida SVG:

CSS

Kala duwanaansho

Iyada oo qayb ka ah habka doorsoomayaasha CSS ee Bootstrap, aaladaha hadda waxay isticmaalaan doorsoomayaasha CSS-ga maxalliga ah .tooltipsi loo horumariyo habaynta waqtiga-dhabta ah. Qiimaha doorsoomayaasha CSS waxa lagu dejiyay Sass, sidaa darteed habaynta Sass wali waa la taageerayaa, sidoo kale.

  --#{$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};
  

Doorsoomayaasha 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

Isticmaalka

Plugin-ka Tooltip wuxuu soo saaraa nuxur iyo calaamadayn baahida, iyo sida caadiga ah wuxuu meeleeyaa tilmaamo qalab ka dib cunsurkooda kiciya.

Ku kiciya tilmaanta aalada JavaScript:

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')
})

Calaamadayn

Calaamadeynta loo baahan yahay ee qalab-tireedku waa datasifo kaliya oo titleqaybta HTML ee aad rabto inaad haysato qalab. Astaanta la soo saaray ee tilmaanta qalabku waa mid fudud, in kasta oo ay u baahan tahay boos (sida caadiga ah, oo loo dejiyay topplugin).

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

Curiyayaasha naafada

Qaybaha sifada leh disabledma aha kuwo is dhexgal ah, taasoo la micno ah in isticmaalayaashu aanay diiradda saari karin, kor u qaadi karin, ama aanay gujin karin si ay u kiciyaan qalab (ama popover). Xakameyn ahaan, waxaad u baahan doontaa inaad ka kiciso qalabka wax lagu duubo <div>ama <span>, sida habboon loo sameeyay kiiboodhka diiradda saaraya iyadoo la isticmaalayo tabindex="0".

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

Ikhtiyaarada

Sida xulashooyinka loogu gudbi karo sifooyinka xogta ama JavaScript, waxaad ku dari kartaa magaca ikhtiyaarka ah data-bs-, sida ku jira data-bs-animation="{value}". Hubi inaad ka beddesho nooca kiis ee magaca ikhtiyaarka " camelCase " una beddelo " kebab-case " markaad ikhtiyaarka ku gudbinayso sifooyinka xogta. Tusaale ahaan, isticmaal data-bs-custom-class="beautifier"bedelkii data-bs-customClass="beautifier".

Marka la eego Bootstrap 5.2.0, dhammaan qaybaha waxay taageeraan sifada xogta kaydsan ee tijaabadadata-bs-config ah taas oo u dejin karta qaabaynta qaybaha fudud sida xadhig JSON ah. Marka curiye leeyahay data-bs-config='{"delay":0, "title":123}'iyo data-bs-title="456"sifooyin, titleqiimaha kama dambaysta ahi waxa uu ahaan doonaa 456sifada xogta goonida ahina waxa ay meesha ka saari doontaa qiyamka lagu bixiyo data-bs-config. Intaa waxaa dheer, sifada xogta hadda jirta waxay awood u leedahay inay ku noolaato qiyamka JSON sida data-bs-delay='{"show":0,"hide":150}'.

Isticmaalka shaqada lehpopperConfig

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

Hababka

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

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

Dhacdooyinka

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

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

tooltip.hide()