将鼠标hover在浏览器中的ID’dHTML元素时如何调用“工具提示”？

我正在制作一个版本的“Huck Finn”，它显示不同颜色的对话框，取决于扬声器（紫色为哈克贝利，棕色为他的Pap等），使用CSS如此

#huck { color: purple; } 

……和这样的HTML：

 
"But some says he got out and got away, and come to America." 

这里可以看到这种工作模型

我有一个“字符映射”，显示哪个字符是文档开头附近的颜色，但我发现很多读者会忘记哪种颜色代表哪个字符，而不是强迫它们一直回到doc的开头提醒自己，我想让他们将鼠标hover在彩色文本上，然后在“弹出窗口”或“工具提示”中看到，或者你有什么，它是谁。 因此，如果他们将鼠标hover在上面的句子上（“But”和“America”之间的任何地方），他们会看到类似“哈克正在说话”的内容。

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

Answer 1

在段落标记上建议title属性

 
"But some says he got out and got away, and come to America." 

Answer 2

怎么样：之后

 #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中添加这么多的多个tittle标签..而且你可以根据自己的意愿设计“工具提示”。

Answer 3

为了增加@ Alvaro-Menéndez的答案，我在SO上找到了一个纯粹的css解决方案。

检查小提琴： http ： //jsfiddle.net/lharby/tL4s1hjr/82/

它使用CSS3选择器来设置title属性的样式：

 span:hover { position:relative; cursor:pointer; } span[title]:hover:after { content: attr(title); background:yellow; padding: 4px 8px; color: #000; position: absolute; left: 0; top: 100%; z-index: 20; white-space: nowrap; } 

这是在SO上回答的

最初我打算尝试提出一个jqueryhoverfunction，但我认为这更加整洁。

Answer 4

您可以尝试使用Kendo UI工具提示。 您可以随意设置它们的样式并更改某些设置，例如它出现的位置。

 $("#aTooltip").kendoTooltip({ position: "top", animation: { open: { effects: "fadeIn", duration: 300 }, close: { effects: "fadeIn", reverse: true, duration: 300 } } }); $("#aTooltip2").kendoTooltip({ position: "bottom", animation: { open: { effects: "slideIn:left", duration: 300 }, close: { effects: "slideIn:left", reverse: true, duration: 300 } } }); $("#aTooltip3").kendoTooltip({ position: "right", animation: { open: { effects: "zoom", duration: 300 }, close: { effects: "zoom", reverse: true, duration: 300 } } }); 

 .tts { float: left; margin: 0 20px; } 

     
 
 
 This is one 
 
 
 This is two 
 
 
 This is three