DSO Toolkit homepage

Tooltip (Web Component)

Component preview opent in nieuw tabblad

Een tooltip hoort bij een target element. Dit kan aangegeven worden met het attribuut for. Dit kan een string zijn met een id of een HTMLElement. Zonder target wordt de parent van <dso-tooltip> gebruikt.

Scriptend de tooltip tonen/verbergen kan met de instance methods activate() en deactivate() of met het het attribuut active.

Het positioneren van de tooltip wordt met Popper gedaan.

Boven
Ik sta links van de inhoud
Ik sta rechts van de inhoud
Ik sta onder de inhoud 
<!-- Default -->
<!-- Impliciet: Geen @for attribute dus target is direct parent -->
<button type="button">
    <dso-icon icon="plus"></dso-icon>
    <dso-tooltip position="top">
        Boven
    </dso-tooltip>
</button>

<!-- Expliciet: @for attribute met verwijzing naar ander element -->
<input type="text" id="demo-top">
<dso-tooltip position="top" for="demo-top">
    Boven
</dso-tooltip>
<!-- Tooltip Left -->
<!-- Impliciet: Geen @for attribute dus target is direct parent -->
<button type="button">
    <dso-icon icon="plus"></dso-icon>
    <dso-tooltip position="left">
        Ik sta links van de inhoud
    </dso-tooltip>
</button>

<!-- Expliciet: @for attribute met verwijzing naar ander element -->
<input type="text" id="demo-left">
<dso-tooltip position="left" for="demo-left">
    Ik sta links van de inhoud
</dso-tooltip>
<!-- Tooltip Right -->
<!-- Impliciet: Geen @for attribute dus target is direct parent -->
<button type="button">
    <dso-icon icon="plus"></dso-icon>
    <dso-tooltip position="right">
        Ik sta rechts van de inhoud
    </dso-tooltip>
</button>

<!-- Expliciet: @for attribute met verwijzing naar ander element -->
<input type="text" id="demo-right">
<dso-tooltip position="right" for="demo-right">
    Ik sta rechts van de inhoud
</dso-tooltip>
<!-- Tooltip Bottom -->
<!-- Impliciet: Geen @for attribute dus target is direct parent -->
<button type="button">
    <dso-icon icon="plus"></dso-icon>
    <dso-tooltip position="bottom">
        Ik sta onder de inhoud
    </dso-tooltip>
</button>

<!-- Expliciet: @for attribute met verwijzing naar ander element -->
<input type="text" id="demo-bottom">
<dso-tooltip position="bottom" for="demo-bottom">
    Ik sta onder de inhoud
</dso-tooltip>
<!-- Impliciet: Geen @for attribute dus target is direct parent -->
<button type="button">
  <dso-icon icon="plus"></dso-icon>
  <dso-tooltip position="{{ position }}">
    {{ label }}
  </dso-tooltip>
</button>

<!-- Expliciet: @for attribute met verwijzing naar ander element -->
<input type="text" id="demo-{{ position }}">
<dso-tooltip position="{{ position }}" for="demo-{{ position }}">
  {{ label }}
</dso-tooltip>
/* Default */
label: Boven
position: top
/* Tooltip Left */
label: Ik sta links van de inhoud
position: left
/* Tooltip Right */
label: Ik sta rechts van de inhoud
position: right
/* Tooltip Bottom */
label: Ik sta onder de inhoud
position: bottom