Een tooltip geeft extra informatie wanneer de gebruiker de muis over een element plaatst.
Gebruik
Een tooltip kan gebruikt worden om iets te verduidelijken. Plaats de inhoud
van de tooltip in het title
attribuut. Zonder javascript
wordt de inhoud in een ‘standaard’ tooltip getoond. De inhoud van
een tooltip kan geen HTML of opmaak bevatten.
Tooltip op een icoon
Gebruik voor een icon-tooltip als icoon .tooltip__icon
Javascript
In bovenstaande voorbeelden wordt het attribuut x-uno-tooltip
gebruikt om
de javascript te triggeren. De tooltip gedraagd zich als een singleton, er kan
maar één tooltip tegelijk in beeld staan.
<script>
// Load tooltip component
System.import('/uno/components/tooltip/tooltip.js').then(function (module) {
// Select all tooltip elements on the page
var tooltips = document.querySelectorAll('.example [x-uno-tooltip]');
// Initialize all tooltips
for (var i = 0; i < tooltips.length; i++) {
new module.Tooltip(tooltips.item(i));
}
});
</script>
Benodigde stylesheets
/uno/components/tooltip/tooltip.css