Avoir une info-bulle ou une fenêtre contextuelle pour les abréviations

Question

J'ai un texte qui ressemble à :

"<h4>If the Client&#39;s EMR/EHR/Billing System supports HL-7 Standards (HL-7 Compatible), can integrate with the client&#39;s system through HL-7<br> Messaging to retrieve the information it needs to process the charges, rejections and denials for the client.</h4>
<h3 style= "color:#008080;">This approach consists of the following technical steps:</h3>
<div class="well" style= "color:#990012; font-size:18px">
1-  will setup a secure FTP site for the client&#39;s EMR/EHR/Billing System.
2- This is an EHR example and JAS </div>

J'ai un code avec beaucoup de texte comme ceci. Je voudrais pouvoir survoler les abréviations (EHR, HL-7, EMR) et faire apparaître une info-bulle avec le mot entier comme pour "EHR", "Electronic health record", "HL-7" = "health level" et ainsi de suite, j'ai essayé l'info-bulle comme ceci :

<h4>If the Client&#39;s <div class="tooltip">EMR/EHR/Billing <span class="tooltiptext">Tooltip text</span>
</div> System supports 

Mais ensuite, le DME/DSE a disparu.

Answer 1

L'approche habituelle consiste à utiliser un <abbr> étiquette :

<abbr title="Electronic health record">EHR</abbr>

Vous pouvez ensuite la styliser comme vous le souhaitez (par exemple, ajouter un soulignement pour indiquer que les personnes peuvent passer la souris dessus pour voir l'infobulle).

Démonstration

Answer 2

Pour utiliser la fonctionnalité intégrée du <abbr> vous avez besoin de la title avec le nom complet de votre abréviation :

<abbr title="World Health Organization">WHO</abbr>

Pour juste un pop-up Considérer ce qui suit Tutoriel de W3 Schools. Il utilise des styles CSS simples pour obtenir l'effet désiré et aucune bibliothèque externe n'est nécessaire.