Tooltip

Last modified by Thiago Krieck on 2023/12/05 13:59

Properties:

  • Label
  • For (the element that calls the tooltip)

Shoelace

https://shoelace.style/components/tooltip

<sl-tooltip content="This is a tooltip">
  <sl-button>Hover Me</sl-button>
</sl-tooltip>

vue-dsfr

Vue-dsfr does not have an implementation for the Tooltip component. The standard html tag from DSFR should be used. 

<a class="fr-link" aria-describedby="tooltip-2989" id="link-2990" href="#">
    Exemple
</a>
<span class="fr-tooltip fr-placement" id="tooltip-2989" role="tooltip" aria-hidden="true">Lorem [...] elit ut.</span>

Vuetify

https://vuetifyjs.com/en/components/tooltips/#usage

<v-tooltip text="Tooltip">
  <template v-slot:activator="{ props }">
    <v-btn v-bind="props">Tooltip</v-btn>
  </template>
</v-tooltip>

Get Connected