Tooltip

Les info-bulles sont créées grâce au composant Tooltip.

Top keyboard_arrow_up Bottom keyboard_arrow_down keyboard_arrow_left Left Right keyboard_arrow_right

L’élément qui contient l’info-bulle doit avoir la classe tooltip ou bien la propriété css position: relative

<script>
    import { Tooltip } from 'gros/tooltip'
</script>


<button class="tooltip">
    <Tooltip top content="Tooltip top"/>
    Top
</button>

<button class="tooltip">
    <Tooltip bottom content="Tooltip bottom"/>
    Bottom
</button>

<button class="tooltip">
    <Tooltip left content="Tooltip left"/>
    Left
</button>

<button class="tooltip">
    <Tooltip right content="Tooltip right"/>
    Right
</button>

Décalage

Le paramètre gap permet de décaller les info-bulles.

Gap = 16 keyboard_arrow_up Gap = 32 keyboard_arrow_down keyboard_arrow_left Gap = 64 Gap = 0 keyboard_arrow_right

<button class="tooltip">
    <Tooltip gap={16} top content="Tooltip top"/>
    Gap = 16
</button>