有工具提示或弹出缩写

Question

我的文字就像：

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

我的代码包含很多这样的文字。我希望能够将鼠标悬停在缩写（EHR，HL-7，EMR）上，并提供一个工具提示，弹出整个单词，如“EHR”，“电子健康记录”，“HL-7”=“健康等级“等等，我尝试了这样的工具提示：

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

然后我EMR / EHR消失了。

Answer 1

通常的方法是使用<abbr>标记：

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

然后您可以根据需要设置样式（例如，添加下划线以指示人们可以将鼠标悬停在其上以查看工具提示。）

Demo

Answer 2

要使用<abbr>的内置功能，您需要title属性，并使用缩写的全名：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

对于只是弹出，请考虑以下W3 Schools Tutorial.它使用简单的CSS样式来提供所需的效果，并且不需要外部库。