Kwacce Bootstrap 5 tooltip

Tooltip

Tooltip komponenta shi ne yar kaiwarta ceceka, kuma za a gana ta idan a bukaci kudancin tushen a cikin element:

Kuwa da za a samar da tooltip:

Don samar da tooltip, sake amfani da: data-bs-toggle="tooltip" Kuwa ainiya a kara da samar da abin da za a yi amfani da shi a cikin element.

Kama aiki ne, amfani da: title Kuwa ainiya kuma cewa ainiya za a gana cewa a cikin tooltip:

<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="Kasance!">Sake dake da kai tsokan na! </button>

Tunani:Tooltip aiki ne a kaiwaki da JavaScript domin aiki.

Dukkan code a cikin wakilin na yana iya aiki da tooltips a cikin wakilin:

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

Kai tsare shi shi

Dabino kwarin kwarin aiki

Dabino aiki ne, tooltips aiki ne a kuduwa na abin.

Kama aiki ne, amfani da: data-bs-placement Dabino kwarin kwarin aiki a tsawon kuduwa, kuduwa, kuduwa ko kuduwa na abin:

Mukaddashi

<a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Kai tsare shi!">Hover</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Kai tsare shi!">Hover</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="left" title="Kai tsare shi!">Hover</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" title="Kai tsare shi!">Hover</a>

Kai tsare shi shi