Tooltip

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/panel/panel.css
• /uno/components/tooltip/tooltip.css