Bootstrap 4 Tooltip
Bootstrap 4 Tooltip
De component Tooltip is een klein pop-upvenster dat verschijnt wanneer de gebruiker de muisaanwijzer over een element beweegt:
Een tooltip maken
Om een tooltip te maken, voegt u het data-toggle="tooltip"
attribuut toe aan een element.
Gebruik het titleattribuut om de tekst op te geven die in de knopinfo moet worden weergegeven:
<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
Opmerking: Tooltips moeten worden geïnitialiseerd met jQuery: selecteer het opgegeven element en roep de tooltip()methode aan.
Met de volgende code worden alle knopinfo in het document ingeschakeld:
Voorbeeld
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
Tooltips voor positionering
Standaard verschijnt de tooltip bovenop het element.
Gebruik het data-placementattribuut om de positie van de tooltip boven, onder, links of rechts van het element in te stellen:
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>
Volledige Bootstrap Tooltip-referentie
Ga voor een volledige referentie van alle tooltip-opties, methoden en gebeurtenissen naar onze Bootstrap JS Tooltip Reference .