Tooltip: Tooltip Long Text

WIP

HTML
View
Context
Info
Notes


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


        <div class="tooltip {{ position }} fade in" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    {{~ label ~}}
  </div>
</div>


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

Handle: @tooltip--tooltip-long-text
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