Serena Serena - 1 month ago 10
HTML Question

Having a tooltip or pop up for abbreviations

I have text that is like :

"<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>


I have a code with a lot of text like this. I want to be able to hover over the abbreviations (EHR, HL-7, EMR) and for a tooltip to pop up with the whole word like for "EHR", "Electronic health record", "HL-7" = "health level" and so on, I tried the tool-tip like this:

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


But then I EMR/EHR disappeared.

Answer

The usual approach is to use an <abbr> tag:

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

You can then style it as you wish (for example, add an underline to indicate that people can hover over to see the tooltip).

Demo