Toggletip (Web Component)

Component preview

Toggletips geven aanvullende informatie in de gebruikersinterface. Ze lijken erg op tooltips, behalve dat de tip niet wordt weergegeven bij hover of focus. Een toggletip is gekoppeld aan een trigger (info button) en maakt gebruik van ‘Rich Content’ om tekst te structureren en interactieve elementen te plaatsen.

Technische opmerkingen component

Het is op dit moment alleen mogelijk een toggletip te gebruiken icm een info button.
De positionering van de toggletip is, net als bij tooltips, instelbaar.

Wanneer het component gebruiken

Gebruik een toggletip om extra informatie te bieden, zonder dat de gebruiker direct de context van de pagina verliest. Voorwaarde is dat de gebruiker niet naar de informatie hoeft te handelen.

De inhoud van een toggletip is conceptueel vaak gelijk aan voetnoten op een pagina. Interactieve elementen zoals links zijn OK.

Wanneer het component niet te gebruiken

Een toggletip is dus niet bedoeld als vervanging voor een tooltip met één woord of term ter verduidelijking van een actie. Plaats geen cruciale informatie of lange teksten in een toggletip. Overweeg om voor langere inhoud een modal te gebruiken.

En beter nog; als je de ruimte hebt gebruik dan géén tooltips of toggletips, maar duidelijke labels en vaste content op de pagina.

Hoe het component te gebruiken

Een toggletip is een samengesteld patroon met een info button en een overlay (tooltip). De info button schakelt de zichtbaarheid van de overlay in en uit.

Gedrag en toegankelijkheid van het component

De trigger bevat altijd een toegankelijk label; als deze niet is gedefinieerd bij de toggletip wordt de default “Toelichting”.

Voorbeelden

Stelselcatalogus > Begrip
Mijn Omgevingsloket > Project

Rechts met platte content

Met de Omgevingswet wil de overheid de regels voor ruimtelijke ontwikkeling vereenvoudigen. Dit is een toggletip met platte content. In een aantal gemeenten wordt nu al volgens de Omgevingswet gewerkt.

Rechts met interactieve content

Met de Omgevingswet wil de overheid de regels voor ruimtelijke ontwikkeling vereenvoudigen. Dit is een toggletip met interactieve content. In een aantal gemeenten wordt nu al volgens de Omgevingswet gewerkt.

Links met interactieve content

Onder met interactieve content

Boven met interactieve content

Rechts met veel tekst

Met de Omgevingswet wil de overheid de regels voor ruimtelijke ontwikkeling vereenvoudigen. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis posuere aliquam leo vitae gravida. Nullam gravida tellus sed varius dictum. Donec a risus at leo tincidunt laoreet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc convallis magna in lacus rhoncus, in lacinia libero sagittis. Vivamus eu ante erat. Vivamus tincidunt id mi et sollicitudin. Sed varius gravida dictum. In een aantal gemeenten wordt nu al volgens de Omgevingswet gewerkt.

Rechts met veel tekst smal

Secundaire Toggletip

<!-- Default -->
<div class="toolkit-example-wrapper">
    <div class="toolkit-example-text">
        <h2>Rechts met platte content</h2>
    </div>
    <div class="toolkit-example">
        <p>Met de Omgevingswet wil de overheid de regels voor ruimtelijke ontwikkeling vereenvoudigen. <dso-toggletip>Dit is een toggletip met platte content.</dso-toggletip> In een aantal gemeenten wordt nu al volgens de Omgevingswet gewerkt.</p>
    </div>
</div>

<!-- Interactieve Content -->
<div class="toolkit-example-wrapper">
    <div class="toolkit-example-text">
        <h2>Rechts met interactieve content</h2>
    </div>
    <div class="toolkit-example">
        <p>Met de Omgevingswet wil de overheid de regels voor ruimtelijke ontwikkeling vereenvoudigen. <dso-toggletip>Dit is een toggletip met <a href="#">interactieve content</a>.</dso-toggletip> In een aantal gemeenten wordt nu al volgens de Omgevingswet gewerkt.</p>
    </div>
</div>

<!-- Left -->
<div class="toolkit-example-wrapper">
    <div class="toolkit-example-text">
        <h2>Links met interactieve content</h2>
    </div>
    <div class="toolkit-example">
        <p>Met de Omgevingswet wil de overheid de regels voor ruimtelijke ontwikkeling vereenvoudigen. <dso-toggletip position="left">Dit is een toggletip met <a href="#">interactieve content</a>.</dso-toggletip> In een aantal gemeenten wordt nu al volgens de Omgevingswet gewerkt.</p>
    </div>
</div>

<!-- Bottom -->
<div class="toolkit-example-wrapper">
    <div class="toolkit-example-text">
        <h2>Onder met interactieve content</h2>
    </div>
    <div class="toolkit-example">
        <p>Met de Omgevingswet wil de overheid de regels voor ruimtelijke ontwikkeling vereenvoudigen. <dso-toggletip position="bottom">Dit is een toggletip met <a href="#">interactieve content</a>.</dso-toggletip> In een aantal gemeenten wordt nu al volgens de Omgevingswet gewerkt.</p>
    </div>
</div>

<!-- Top -->
<div class="toolkit-example-wrapper">
    <div class="toolkit-example-text">
        <h2>Boven met interactieve content</h2>
    </div>
    <div class="toolkit-example">
        <p>Met de Omgevingswet wil de overheid de regels voor ruimtelijke ontwikkeling vereenvoudigen. <dso-toggletip position="top">Dit is een toggletip met <a href="#">interactieve content</a>.</dso-toggletip> In een aantal gemeenten wordt nu al volgens de Omgevingswet gewerkt.</p>
    </div>
</div>

<!-- Not Small -->
<div class="toolkit-example-wrapper">
    <div class="toolkit-example-text">
        <h2>Rechts met veel tekst</h2>
    </div>
    <div class="toolkit-example">
        <p>Met de Omgevingswet wil de overheid de regels voor ruimtelijke ontwikkeling vereenvoudigen. <dso-toggletip>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis posuere aliquam leo vitae gravida.
                Nullam gravida tellus sed varius dictum. Donec a risus at leo tincidunt laoreet.
                Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                Nunc convallis magna in lacus rhoncus, in lacinia libero sagittis. Vivamus eu ante erat.
                Vivamus tincidunt id mi et sollicitudin. Sed varius gravida dictum.</dso-toggletip> In een aantal gemeenten wordt nu al volgens de Omgevingswet gewerkt.</p>
    </div>
</div>

<!-- Small -->
<div class="toolkit-example-wrapper">
    <div class="toolkit-example-text">
        <h2>Rechts met veel tekst smal</h2>
    </div>
    <div class="toolkit-example">
        <p>Met de Omgevingswet wil de overheid de regels voor ruimtelijke ontwikkeling vereenvoudigen. <dso-toggletip small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis posuere aliquam leo vitae gravida.
                Nullam gravida tellus sed varius dictum. Donec a risus at leo tincidunt laoreet.
                Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                Nunc convallis magna in lacus rhoncus, in lacinia libero sagittis. Vivamus eu ante erat.
                Vivamus tincidunt id mi et sollicitudin. Sed varius gravida dictum.</dso-toggletip> In een aantal gemeenten wordt nu al volgens de Omgevingswet gewerkt.</p>
    </div>
</div>

<!-- Secondary -->
<div class="toolkit-example-wrapper">
    <div class="toolkit-example-text">
        <h2>Secundaire Toggletip</h2>
    </div>
    <div class="toolkit-example">
        <p>Met de Omgevingswet wil de overheid de regels voor ruimtelijke ontwikkeling vereenvoudigen. <dso-toggletip secondary="true">Dit is een toggletip met <a href="#">interactieve content</a>.</dso-toggletip> In een aantal gemeenten wordt nu al volgens de Omgevingswet gewerkt.</p>
    </div>
</div>

<div class="toolkit-example-wrapper">
  <div class="toolkit-example-text">
    <h2>{{ label }}</h2>
  </div>
  <div class="toolkit-example">
    <p>Met de Omgevingswet wil de overheid de regels voor ruimtelijke ontwikkeling vereenvoudigen. <dso-toggletip {{ attributes([position, 'position', position]) }} {{ attributes([small, 'small']) }} {{ attributes([secondary, 'secondary', secondary]) }}>{{ text | safe }}</dso-toggletip> In een aantal gemeenten wordt nu al volgens de Omgevingswet gewerkt.</p>
  </div>
</div>

/* Default */
label: Rechts met platte content
text: Dit is een toggletip met platte content.

/* Interactieve Content */
label: Rechts met interactieve content
text: Dit is een toggletip met <a href="#">interactieve content</a>.

/* Left */
label: Links met interactieve content
text: Dit is een toggletip met <a href="#">interactieve content</a>.
position: left

/* Bottom */
label: Onder met interactieve content
text: Dit is een toggletip met <a href="#">interactieve content</a>.
position: bottom

/* Top */
label: Boven met interactieve content
text: Dit is een toggletip met <a href="#">interactieve content</a>.
position: top

/* Not Small */
label: Rechts met veel tekst
text: >-
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis posuere aliquam
  leo vitae gravida.
                Nullam gravida tellus sed varius dictum. Donec a risus at leo tincidunt laoreet.
                Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                Nunc convallis magna in lacus rhoncus, in lacinia libero sagittis. Vivamus eu ante erat.
                Vivamus tincidunt id mi et sollicitudin. Sed varius gravida dictum.

/* Small */
label: Rechts met veel tekst smal
text: >-
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis posuere aliquam
  leo vitae gravida.
                Nullam gravida tellus sed varius dictum. Donec a risus at leo tincidunt laoreet.
                Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                Nunc convallis magna in lacus rhoncus, in lacinia libero sagittis. Vivamus eu ante erat.
                Vivamus tincidunt id mi et sollicitudin. Sed varius gravida dictum.
small: true

/* Secondary */
label: Secundaire Toggletip
text: Dit is een toggletip met <a href="#">interactieve content</a>.
secondary: true