Comment puis-je créer des info-bulles activées par le survol pour les éléments Div avec des effets de fondu entrant/sortant ?

Améliorez l'interactivité Div avec des info-bulles activées par le survol

L'affichage d'informations ou de conseils pertinents sur une page Web peut améliorer l'expérience utilisateur. Dans ce cas, nous cherchons à ajouter une info-bulle à un élément div qui apparaît lorsque l'utilisateur le survole, avec un effet de fondu entrant/sortant fluide. Voici comment cela peut être réalisé :

La fonctionnalité de base de l'info-bulle peut être obtenue en ajoutant un attribut title à l'élément div. Cela affiche une simple info-bulle lorsque le curseur passe sur l'élément. Par exemple :

<div title="This is my tooltip">
<p>En plus de l'info-bulle de base, des propriétés CSS peuvent être incorporées pour créer un effet plus dynamique :</p>
<p><strong>CSS pour l'animation en fondu entrant/sortant </strong></p>
<p>Pour ajouter un effet de fondu entrant/sortant, CSS peut être utilisé pour animer l'apparition et la disparition du info-bulle :</p>
<pre class="brush:php;toolbar:false">.visible {
  height: 3em;
  width: 10em;
  background: yellow;
}

<div title="This is my tooltip" class="visible"></div>