Tilmaamaha Qalabka

Dulmar

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

• Tilmaamaha qalabku waxay ku tiirsan yihiin qaybta 3aad ee maktabadda Popper si loo meeleeyo. Waa in aad ku darto popper.min.js ka hor bootstrap.js ama isticmaal bootstrap.bundle.min.js/ bootstrap.bundle.jska kooban Popper si ay qalabku u shaqeeyaan!
• 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.

Tusaale: Dari tilmaanta aaladaha meel kasta

Hal dariiqo oo lagu bilaabi karo dhammaan qalabyada bogga waxay noqon kartaa in lagu xusho data-bs-togglesifadooda:

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

Tusaalooyinka

Ka dul rog xiriirka hoose si aad u aragto qalabyada:

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

Iyo HTML caadadii lagu daray:

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

Sida SVG:

Sass

Kala duwanaansho

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

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:

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

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" 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" title="Disabled tooltip">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

Ikhtiyaarada

Ikhtiyaarada waxaa lagu gudbi karaa sifada xogta ama JavaScript. Sifooyinka xogta, ku dheji magaca ikhtiyaarka data-bs-, sida ku jira data-bs-animation="". Hubi inaad ka beddesho nooca kiiska ee magaca ikhtiyaarka ah ee geela una beddelo kiis kebab marka aad doorashooyinka ku gudbinayso sifooyinka xogta. Tusaale ahaan, halkii aad isticmaali lahayd data-bs-customClass="beautifier", isticmaal data-bs-custom-class="beautifier".

Isticmaalka shaqada lehpopperConfig

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

Hababka

show

Waxay daaha ka qaadaysaa aaladda curiyaha Ku soo noqda qofka soo wacay ka hor inta aan aalada qalabku dhab ahaan la muujin (tusaale ka hor intaanay shown.bs.tooltipdhacdada dhicin). Tan waxa loo tixgaliyaa “handual” kicinta qalabka. Tilmaamaha qalabka leh cinwaanno eber ah weligood lama soo bandhigin.

tooltip.show()

qari

Wuxuu qariyaa calaamadda curiyaha. Ku soo noqda qofka soo wacay ka hor inta aan la qarin qalabka wax lagu qoro (tusaale ka hor intaanay hidden.bs.tooltipdhacdada dhicin). Tan waxa loo tixgaliyaa “handual” kicinta qalabka.

tooltip.hide()

leexleex

Beddelayaa shay raadka. Ku soo noqda qofka soo wacay ka hor inta aan aalada qalabku dhab ahaan la muujin ama la qarin (tusaale ka hor inta aanay dhacdada shown.bs.tooltipama hidden.bs.tooltipdhacdada dhicin). Tan waxa loo tixgaliyaa “handual” kicinta qalabka.

tooltip.toggle()

tuurid

Wuxuu qariyaa oo baabi'iyaa aaladda curiyaha (Waxay meesha ka saartaa xogta la kaydiyay ee cunsurka DOM). Aaladaha adeegsada ergada (kuwaaso la abuuray iyadoo la isticmaalayo ikhtiyaarka selector) si gaar ah looma baabi'in karo walxaha kiciya faraca.

tooltip.dispose()

awood

Waxay siisaa aalada curiyaha awoodda lagu tuso. Tilmaamaha qalabku waa la dajiyay.

tooltip.enable()

hawl gab

Waxay meesha ka saartaa awoodda qalabka curiyaha in la muujiyo. Qalabka tilmaanta waxa la tusi karaa oo keliya haddii dib loo hawlgeliyo.

tooltip.disable()

Daloola

Waxay beddeshaa awoodda aaladda curiyaha si loo muujiyo ama loo qariyo.

tooltip.toggleEnabled()

cusbooneysiin

Waxay cusboonaysiisaa booska tibaaxaha curiyaha.

tooltip.update()

heliTusaale

Habka taagan kaas oo kuu ogolaanaya inaad hesho tusaalaha qalabaynta ee la xidhiidha curiyaha DOM

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

HelOrCreateInstance

Habka taagan kaas oo kuu ogolaanaya inaad hesho tusaalaha qalabaynta ee la xidhiidha curiyaha DOM, ama abuurto mid cusub haddii aan la bilaabin

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

Dhacdooyinka

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

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

tooltip.hide()