Bootstrap 4 Nutswenk
Bootstrap 4 Nutswenk
Die Tooltip-komponent is 'n klein opspringblokkie wat verskyn wanneer die gebruiker die muiswyser oor 'n element beweeg:
Hoe om 'n nutswenk te skep
Om 'n nutswenk te skep, voeg die data-toggle="tooltip"
kenmerk by 'n element.
Gebruik die titlekenmerk om die teks te spesifiseer wat in die nutswenk vertoon moet word:
<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
Let wel: Tooltips moet geïnisialiseer word met jQuery: kies die gespesifiseerde element en roep die tooltip()metode.
Die volgende kode sal alle gereedskapwenke in die dokument aktiveer:
Voorbeeld
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
Posisionering gereedskapwenke
By verstek sal die nutswenk bo-op die element verskyn.
Gebruik die data-placementkenmerk om die posisie van die nutswenk bo-, onder-, linker- of regterkant van die element te stel:
Voorbeeld
<a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Hover</a>
Voltooi Bootstrap Tooltip-verwysing
Vir 'n volledige verwysing van alle nutswenk-opsies, metodes en gebeure, gaan na ons Bootstrap JS Tooltip Reference .