Ouverture du tooltip au survol
<a aria-describedby="tooltip-4596" id="link-4597" href="#" class="fr-link">Exemple</a>
<span class="fr-tooltip fr-placement" id="tooltip-4596" role="tooltip">Lorem [...] elit ut.</span>
L'ajout de la classe 'fr-btn--tooltip' déclenche l'ouverture du tooltip au click.
<button id="button-4602" aria-describedby="tooltip-4601" class="fr-btn--tooltip fr-btn">Information contextuelle</button>
<span class="fr-tooltip fr-placement" id="tooltip-4601" 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-4605">Exemple</a>
<span class="fr-tooltip fr-placement" id="tooltip-4605" 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-4608">Exemple</a>
<span class="fr-tooltip fr-placement" id="tooltip-4608" role="tooltip">Lorem [...] elit ut.</span>
</div>
</div>
<div class="fr-share" id="share-4618">
<p class="fr-share__title">Partager la page</p>
<ul class="fr-btns-group">
<li>
<a target="_blank" rel="noopener external" title="[À MODIFIER - Intitulé] - nouvelle fenêtre" id="share-4619" onclick="window.open(this.href,'Partager sur Facebook','toolbar=no,location=yes,status=no,menubar=no,scrollbars=yes,resizable=yes,width=600,height=450'); event.preventDefault();" aria-describedby="tooltip-4617" href="https://www.facebook.com/sharer.php?u=[À MODIFIER - url de la page]" class="fr-btn--facebook fr-btn">Partager sur Facebook</a>
<span class="fr-tooltip fr-placement" id="tooltip-4617" role="tooltip">Lorem [...] elit ut.</span>
</li>
<li>
<!-- Les paramètres de la reqûete doivent être URI-encodés (ex: encodeURIComponent() en js) -->
<a target="_blank" rel="noopener external" title="[À MODIFIER - Intitulé] - nouvelle fenêtre" id="share-4620" onclick="window.open(this.href,'Partager sur X (anciennement Twitter)','toolbar=no,location=yes,status=no,menubar=no,scrollbars=yes,resizable=yes,width=600,height=420'); 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]" class="fr-btn--twitter-x fr-btn">Partager sur X (anciennement Twitter)</a>
</li>
<li>
<a target="_blank" rel="noopener external" title="[À MODIFIER - Intitulé] - nouvelle fenêtre" id="share-4621" onclick="window.open(this.href,'Partager sur LinkedIn','toolbar=no,location=yes,status=no,menubar=no,scrollbars=yes,resizable=yes,width=550,height=550'); event.preventDefault();" href="https://www.linkedin.com/shareArticle?url=[À MODIFIER - url de la page]&title=[À MODIFIER - titre ou texte descriptif de la page]" class="fr-btn--linkedin fr-btn">Partager sur LinkedIn</a>
</li>
<li>
<a target="_blank" rel="noopener external" title="[À MODIFIER - Intitulé] - nouvelle fenêtre" id="share-4622" href="mailto:?subject=[À MODIFIER - objet du mail]&body=[À MODIFIER - titre ou texte descriptif de la page] [À MODIFIER - url de la page]" class="fr-btn--mail fr-btn">Partager par email</a>
</li>
<li>
<button id="share-4623" onclick="navigator.clipboard.writeText(window.location).then(function() {alert('Adresse copiée dans le presse papier.')});" class="fr-btn--copy fr-btn">Copier dans le presse-papier</button>
</li>
</ul>
</div>
| th0 | th1 | th2 | th3 |
|---|---|---|---|
| Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame |
| Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame | 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. | Lorem ipsum dolor sit ame |
| Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame |
| Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame |
<div class="fr-table" id="tootltip-table-component">
<div class="fr-table__wrapper">
<div class="fr-table__container">
<div class="fr-table__content">
<table id="tootltip-table">
<thead>
<tr>
<th scope="col">
th0
</th>
<th scope="col">
th1
</th>
<th scope="col">
th2
</th>
<th scope="col">
th3
</th>
</tr>
</thead>
<tbody>
<tr id="tootltip-table-row-key-1" data-row-key="1">
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
</tr>
<tr id="tootltip-table-row-key-2" data-row-key="2">
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
<button id="button-4628" aria-describedby="tooltip-4627" class="fr-btn--tooltip fr-btn">Information contextuelle</button>
<span class="fr-tooltip fr-placement" id="tooltip-4627" role="tooltip">Lorem [...] elit ut.</span>
</td>
<td>
Lorem [...] elit ut.
</td>
</tr>
<tr id="tootltip-table-row-key-3" data-row-key="3">
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
</tr>
<tr id="tootltip-table-row-key-4" data-row-key="4">
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>