Ouverture du tooltip au survol
<a class="fr-link" aria-describedby="tooltip-4367" id="link-4368" href="#">Exemple</a>
<span class="fr-tooltip fr-placement" id="tooltip-4367" role="tooltip">Lorem [...] elit ut.</span>
L'ajout de la classe 'fr-btn--tooltip' déclenche l'ouverture du tooltip au click.
<button class="fr-btn--tooltip fr-btn" id="button-4373" aria-describedby="tooltip-4372">
Information contextuelle
</button>
<span class="fr-tooltip fr-placement" id="tooltip-4372" role="tooltip">Lorem [...] elit ut.</span>
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.
<div class="fr-grid-row fr-grid-row--gutters">
<div class="fr-col-4 fr-col-sm-2">
<a class="fr-link" href="#" aria-describedby="tooltip-4376">Exemple</a>
<span class="fr-tooltip fr-placement" id="tooltip-4376" role="tooltip">Lorem [...] elit ut.</span>
</div>
<div class="fr-col-8 fr-col-sm-10">
<p>Lorem [...] elit ut.</p>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.
<div class="fr-grid-row fr-grid-row--gutters">
<div class="fr-col-8 fr-col-sm-10">
<p>Lorem [...] elit ut.</p>
</div>
<div class="fr-col-4 fr-col-sm-2">
<a class="fr-link" href="#" aria-describedby="tooltip-4379">Exemple</a>
<span class="fr-tooltip fr-placement" id="tooltip-4379" role="tooltip">Lorem [...] elit ut.</span>
</div>
</div>
Partager la page
<div class="fr-share">
<p class="fr-share__title">Partager la page</p>
<ul class="fr-btns-group">
<li>
<a class="fr-btn--facebook fr-btn" target="_blank" rel="noopener" title="[À MODIFIER - Intitulé] - nouvelle fenêtre" id="button-4388" onclick="window.open(this.href,'Partager sur Facebook','toolbar=no,location=yes,status=no,menubar=no,scrollbars=yes,resizable=yes,width=undefined,height=undefined'); event.preventDefault();" href="https://www.facebook.com/sharer.php?u=[À MODIFIER - url de la page]" aria-describedby="tooltip-4387">
Partager sur Facebook
</a>
<span class="fr-tooltip fr-placement" id="tooltip-4387" role="tooltip">Lorem [...] elit ut.</span>
</li>
<li>
<a class="fr-btn--twitter fr-btn" target="_blank" rel="noopener" title="[À MODIFIER - Intitulé] - nouvelle fenêtre" id="button-4389" onclick="window.open(this.href,'Partager sur Twitter','toolbar=no,location=yes,status=no,menubar=no,scrollbars=yes,resizable=yes,width=undefined,height=undefined'); event.preventDefault();" href="https://twitter.com/intent/tweet?url=[À MODIFIER - url de la page]&text=[À MODIFIER - titre ou texte descriptif de la page]&via=[À MODIFIER - via]&hashtags=[À MODIFIER - hashtags]">
Partager sur Twitter
</a>
</li>
<li>
<a class="fr-btn--linkedin fr-btn" target="_blank" rel="noopener" title="[À MODIFIER - Intitulé] - nouvelle fenêtre" id="button-4390" onclick="window.open(this.href,'Partager sur LinkedIn','toolbar=no,location=yes,status=no,menubar=no,scrollbars=yes,resizable=yes,width=undefined,height=undefined'); event.preventDefault();" href="https://www.linkedin.com/shareArticle?url=[À MODIFIER - url de la page]&title=[À MODIFIER - titre ou texte descriptif de la page]">
Partager sur LinkedIn
</a>
</li>
<li>
<a class="fr-btn--mail fr-btn" target="_blank" rel="noopener external" title="[À MODIFIER - Intitulé] - nouvelle fenêtre" id="button-4391" href="mailto:?subject=[À MODIFIER - objet du mail]&body=[À MODIFIER - titre ou texte descriptif de la page] [À MODIFIER - url de la page]">
Partager par email
</a>
</li>
<li>
<button class="fr-btn--copy fr-btn" id="button-4392" onclick="navigator.clipboard.writeText(window.location);alert('Adresse copiée dans le presse papier.');">
Copier dans le presse-papier
</button>
</li>
</ul>
</div>
| Nom | Prenom | Status | Prix | Documentation | Commits | Country | City | timestamp |
|---|---|---|---|---|---|---|---|---|
| Nakamoto | Sarah |
Livré |
30,00€ | Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut. | transmit primary protocol | Japan | Tokyo | 2022-12-15T15:52:01+00:00 |
| Nakamoto | Sarah |
Livré |
30,00€ | Label lien | transmit primary protocol | Japan | Tokyo | 2022-12-15T15:52:01+00:00 |
<div class="fr-table fr-table--bordered" id="table-4397">
<table>
<thead>
<tr>
<th scope="col">Nom </th>
<th scope="col">Prenom </th>
<th scope="col">Status </th>
<th scope="col">Prix </th>
<th scope="col">Documentation </th>
<th scope="col">Commits </th>
<th scope="col">Country </th>
<th scope="col">City </th>
<th scope="col">timestamp </th>
</tr>
</thead>
<tbody>
<tr>
<td>Nakamoto</td>
<td>Sarah</td>
<td>
<p class="fr-badge fr-badge--success fr-badge fr-badge--success">Livré</p>
</td>
<td>30,00€</td>
<td>
<button class="fr-btn--tooltip fr-btn" aria-describedby="tooltip-4396">Infobulle</button>
<span class="fr-tooltip fr-placement" id="tooltip-4396" role="tooltip">Lorem [...] elit ut.</span>
</td>
<td>transmit primary protocol</td>
<td>Japan</td>
<td>Tokyo</td>
<td>2022-12-15T15:52:01+00:00</td>
</tr>
<tr>
<td>Nakamoto</td>
<td>Sarah</td>
<td>
<p class="fr-badge fr-badge--success fr-badge fr-badge--success">Livré</p>
</td>
<td>30,00€</td>
<td>
<a class="fr-link" href="#">Label lien</a>
</td>
<td>transmit primary protocol</td>
<td>Japan</td>
<td>Tokyo</td>
<td>2022-12-15T15:52:01+00:00</td>
</tr>
</tbody>
</table>
</div>