Tooltip (CSS Component)

Component preview opent in nieuw tabblad
  • .fade en .in zijn standaard Bootstrap classes die betrekking hebben op animatie en het al dan niet tonen van componenten.
  • Positionering van de tooltip moet via scripting worden gedaan. Bijvoorbeeld het tooltip component van react-bootstrap biedt hier standaard ondersteuning voor. Zie: https://react-bootstrap.github.io/components/overlays/#tooltips
<!-- Default -->
<div class="tooltip top fade in" role="tooltip">
    <div class="tooltip-arrow"></div>
    <div class="tooltip-inner">Boven</div>
</div>
<!-- Tooltip Left -->
<div class="tooltip left fade in" role="tooltip">
    <div class="tooltip-arrow"></div>
    <div class="tooltip-inner">Ik sta links van de inhoud</div>
</div>
<!-- Tooltip Right -->
<div class="tooltip right fade in" role="tooltip">
    <div class="tooltip-arrow"></div>
    <div class="tooltip-inner">Uw verzoek is ingediend. Meestal krijgt u binnen acht weken het besluit van de behandelende organisatie.</div>
</div>
<!-- Tooltip Bottom -->
<div class="tooltip bottom fade in" role="tooltip">
    <div class="tooltip-arrow"></div>
    <div class="tooltip-inner">Ik sta onder de inhoud</div>
</div>
<!-- Tooltip Right Small -->
<div class="tooltip right fade in" role="tooltip">
    <div class="tooltip-arrow"></div>
    <div class="tooltip-inner dso-small">Uw verzoek is ingediend. Meestal krijgt u binnen acht weken het besluit van de behandelende organisatie.</div>
</div>
<div {{ className('tooltip', position, 'fade in') }} role="tooltip">
  <div class="tooltip-arrow"></div>
  <div {{ className('tooltip-inner', [small, 'dso-small']) }}>
    {{- label -}}
  </div>
</div>
/* 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