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>
      

  

  

    {{- label -}}
  


/* 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