Ouverture du tooltip au survol
<a class="village-link" aria-describedby="tooltip-4367" id="link-4368" href="#">Exemple</a>
<span class="village-tooltip village-placement" id="tooltip-4367" role="tooltip">Lorem [...] elit ut.</span>
L'ajout de la classe 'village-btn--tooltip' déclenche l'ouverture du tooltip au click.
<button class="village-btn--tooltip village-btn" id="button-4373" aria-describedby="tooltip-4372">
Information contextuelle
</button>
<span class="village-tooltip village-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="village-grid-row village-grid-row--gutters">
<div class="village-col-4 village-col-sm-2">
<a class="village-link" href="#" aria-describedby="tooltip-4376">Exemple</a>
<span class="village-tooltip village-placement" id="tooltip-4376" role="tooltip">Lorem [...] elit ut.</span>
</div>
<div class="village-col-8 village-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="village-grid-row village-grid-row--gutters">
<div class="village-col-8 village-col-sm-10">
<p>Lorem [...] elit ut.</p>
</div>
<div class="village-col-4 village-col-sm-2">
<a class="village-link" href="#" aria-describedby="tooltip-4379">Exemple</a>
<span class="village-tooltip village-placement" id="tooltip-4379" role="tooltip">Lorem [...] elit ut.</span>
</div>
</div>
Partager la page
<div class="village-share">
<p class="village-share__title">Partager la page</p>
<ul class="village-btns-group">
<li>
<a class="village-btn--facebook village-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="village-tooltip village-placement" id="tooltip-4387" role="tooltip">Lorem [...] elit ut.</span>
</li>
<li>
<a class="village-btn--twitter village-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="village-btn--linkedin village-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="village-btn--mail village-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="village-btn--copy village-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="village-table village-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="village-badge village-badge--success village-badge village-badge--success">Livré</p>
</td>
<td>30,00€</td>
<td>
<button class="village-btn--tooltip village-btn" aria-describedby="tooltip-4396">Infobulle</button>
<span class="village-tooltip village-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="village-badge village-badge--success village-badge village-badge--success">Livré</p>
</td>
<td>30,00€</td>
<td>
<a class="village-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>