twitter-bootstrap
tooltip
Zoeken…
Opmerkingen
De knopinfo is een gebruikersinterface-element dat eruitziet als een klein pop-upvenster. Het wordt meestal geactiveerd wanneer een gebruiker zijn aanwijzer boven een ander element houdt, zonder erop te klikken.
Om prestatieredenen moeten knopinfo worden geïnitialiseerd met jQuery. De volgende code schakelt alle knopinfo in de DOM in:
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
Tooltips plaatsen
Standaard verschijnt de knopinfo boven het element. We kunnen het kenmerk voor data-placement gebruiken om de positie van de knopinfo boven, onder, links of rechts van het element in te stellen.
<a href="#" data-toggle="tooltip" data-placement="top" title="Top tooltip">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Bottom tooltip">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Left tooltip">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Right tooltip">Hover</a
We kunnen ook data-placement="auto" om de tooltip dynamisch te heroriënteren. De knopinfo in het volgende voorbeeld, de knopinfo wordt indien mogelijk links weergegeven, anders wordt deze rechts weergegeven.
<a href="#" data-toggle="tooltip" data-placement="auto left" title="To the left?">Hover</a
Basis voorbeeld
Om een knopinfo te maken, hoeven we alleen het kenmerk data-toggle="tooltip" en een title toe te voegen aan het HTML-element met de knopinfo. Titelkenmerk wordt gebruikt om de tekst op te geven die in de knopinfo wordt weergegeven.
<span data-toggle="tooltip" title="Hello world!">Hover over me</span>
