Tooltip: Tooltip Bottom

WIP

HTML
View
Context
Info
Notes


        
        <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 class="tooltip {{ position }} fade in" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    {{~ label ~}}
  </div>
</div>


        
            
            label: Ik sta onder de content.
position: bottom

Handle: @tooltip--tooltip-bottom
Variants (5): Default , Tooltip Long Text , Tooltip Left , Tooltip Right , Tooltip Bottom
Preview:
- With layout
- Component only
Filesystem Path: components\04-indicators\tooltip\tooltip.hbs

.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