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
Uw verzoek is ingediend. Meestal krijgt u binnen acht weken het besluit van de behandelende organisatie.
Ik sta onder de inhoud
Uw verzoek is ingediend. Meestal krijgt u binnen acht weken het besluit van de behandelende organisatie. 
<!-- 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-tooltip--default">
<dso-tooltip position="top" for="demo-tooltip--default">
    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-tooltip--tooltip-left">
<dso-tooltip position="left" for="demo-tooltip--tooltip-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">
        Uw verzoek is ingediend. Meestal krijgt u binnen acht weken het besluit van de behandelende organisatie.
    </dso-tooltip>
</button>

<!-- Expliciet: @for attribute met verwijzing naar ander element -->
<input type="text" id="demo-tooltip--tooltip-right">
<dso-tooltip position="right" for="demo-tooltip--tooltip-right">
    Uw verzoek is ingediend. Meestal krijgt u binnen acht weken het besluit van de behandelende organisatie.
</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-tooltip--tooltip-bottom">
<dso-tooltip position="bottom" for="demo-tooltip--tooltip-bottom">
    Ik sta onder de inhoud
</dso-tooltip>
<!-- Tooltip Right Small -->
<!-- Impliciet: Geen @for attribute dus target is direct parent -->
<button type="button">
    <dso-icon icon="plus"></dso-icon>
    <dso-tooltip position="right" small>
        Uw verzoek is ingediend. Meestal krijgt u binnen acht weken het besluit van de behandelende organisatie.
    </dso-tooltip>
</button>

<!-- Expliciet: @for attribute met verwijzing naar ander element -->
<input type="text" id="demo-tooltip--tooltip-right-small">
<dso-tooltip position="right" for="demo-tooltip--tooltip-right-small" small>
    Uw verzoek is ingediend. Meestal krijgt u binnen acht weken het besluit van de behandelende organisatie.
</dso-tooltip>
<!-- Impliciet: Geen @for attribute dus target is direct parent -->
<button type="button">
  <dso-icon icon="plus"></dso-icon><dso-tooltip position="{{ position }}" {{ attributes([small, 'small']) }}>
    {{ label }}
  </dso-tooltip>
</button>

<!-- Expliciet: @for attribute met verwijzing naar ander element -->
<input type="text" id="demo-{{ _self.handle }}">
<dso-tooltip position="{{ position }}" for="demo-{{ _self.handle }}" {{ attributes([small, 'small']) }}>
  {{ label }}
</dso-tooltip>
/* Default */
label: Boven
position: top
small: false
/* Tooltip Left */
label: Ik sta links van de inhoud
position: left
small: false
/* Tooltip Right */
label: >-
  Uw verzoek is ingediend. Meestal krijgt u binnen acht weken het besluit van de
  behandelende organisatie.
position: right
small: false
/* Tooltip Bottom */
label: Ik sta onder de inhoud
position: bottom
small: false
/* Tooltip Right Small */
label: >-
  Uw verzoek is ingediend. Meestal krijgt u binnen acht weken het besluit van de
  behandelende organisatie.
position: right
small: true