Bootstrap Tooltip-plug-in
De Tooltip-plug-in
De Tooltip-plug-in is een klein pop-upvenster dat verschijnt wanneer de gebruiker de muisaanwijzer over een element beweegt:
Tip: Plug-ins kunnen afzonderlijk worden toegevoegd (met behulp van het individuele "tooltip.js"-bestand van Bootstrap), of allemaal tegelijk (met "bootstrap.js" of "bootstrap.min.js").
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>
Tip: U kunt ook het data-placementattribuut gebruiken met de waarde " auto", waarmee de browser de positie van de knopinfo kan bepalen. Als de waarde bijvoorbeeld " auto left" is, wordt de knopinfo indien mogelijk aan de linkerkant weergegeven, anders aan de rechterkant.
Volledige Bootstrap Tooltip-referentie
Ga voor een volledige referentie van alle tooltip-opties, methoden en gebeurtenissen naar onze Bootstrap JS Tooltip Reference .