将鼠标悬停在浏览器中 ID 的 HTML 元素上时如何调用“工具提示”？

我正在开发“Huck Finn”的一个版本，它根据说话者的不同颜色显示对话（紫色代表哈克贝利，棕色代表他的爸爸等），使用 CSS 如下

#huck {
    color: purple;
}

...和这样的 HTML：

<p><span id="huck">"But some says he got out and got away, and come to America."</span></p>

可以看到这个的工作模型here http://jsfiddle.net/clayshannon/tL4s1hjr/83/

我有一个“字符映射”，显示文档开头附近的哪个字符是哪种颜色，但我意识到许多读者会忘记哪种颜色代表哪个字符，而不是强迫他们一直回到文档的开头为了提醒自己，我想让他们将鼠标悬停在彩色文本上，并在“弹出窗口”或“工具提示”或你拥有的东西中看到它是谁。因此，如果他们将鼠标悬停在上面的句子上（“但是”和“美国”之间的任何位置），他们会看到类似“哈克正在说话”的内容。

这可能吗？如果是这样，怎么办？

:after 怎么样？

#huck {position:relative;}
#huck:hover:after {
    position:absolute;
    content:'This is huck talking';
    top:30px;
    left:0;
    display:inline-block;
    background-color:violet;
    color:white;

}

并且无需在所有 html 中添加如此多的多个标题标签。此外，您还可以根据需要设置“工具提示”的样式。