Direct naar hoofdinhoud

Hoofdnavigatie

Platform Beta

Tooltip

E illis, cum volemus. Ea possunt paria non esse. At eum nihili facit; Nec tamen ullo modo summum pecudis bonum et hominis idem mihi videri pot
.toolTip

The tooltip is being displayed along side of an input element. This is normally the usecase but it can also function on its own.
noticeable is that the tooltip is now an anchor (<a>), but can also function as an other HTML element e.g. <div>.
In this example the icon is also wrapped inside a formfield__inputContainer, but this is not mandatory

Markup

<div class="formfield__inputContainer">
    <input type="text" class="textInput textInput--fullWidth" id="input2" name="input2"/>
    <div class="tooltipWrapper formfield__toolTipWrapper" data-controller="generic/ui/ToolTip">
        <button type="button" class="toolTip formfield__toolTip" aria-pressed="false"><span class="alt">Toon tooltip met meer informatie</span></button>
        <span aria-live="polite" class="toolTip--hidden" data-tooltip-content=""> E illis, cum volemus. Ea possunt paria non esse.
            At eum nihili facit; Nec tamen ullo modo summum pecudis bonum et hominis idem mihi videri pot
        </span>
    </div>
</div>