Filteren

Tooltip

.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">Hergebruiken</div>
</div>

<!-- Tooltip Long Text -->
<div class="tooltip top fade in" role="tooltip">
    <div class="tooltip-arrow"></div>
    <div class="tooltip-inner">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</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 content.</div>
</div>

<!-- Tooltip Right -->
<div class="tooltip right fade in" role="tooltip">
    <div class="tooltip-arrow"></div>
    <div class="tooltip-inner">Ik sta rechts van de content.</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 content.</div>
</div>

<div {{ className('tooltip', position, 'fade in') }} role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    {{- label -}}
  </div>
</div>

/* Default */
label: Hergebruiken
position: top

/* Tooltip Long Text */
label: >-
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
  ligula eget dolor.
position: top

/* Tooltip Left */
label: Ik sta links van de content.
position: left

/* Tooltip Right */
label: Ik sta rechts van de content.
position: right

/* Tooltip Bottom */
label: Ik sta onder de content.
position: bottom