Question

我正在制作一个版本的＆＃34; Huck Finn＆＃34;以不同的颜色显示对话框，取决于扬声器（对于哈克贝利来说是紫色，对于他的Pap来说是棕色等），使用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

的工作模型

我有一个＆＃34;字符映射＆＃34;显示哪个字符是文档开头附近的哪种颜色，但我发现许多读者会忘记哪种颜色代表哪个字符，而不是强迫它们一直回到文档的开头提醒自己，我想允许他们将鼠标悬停在彩色文本上，然后在弹出窗口中查看＆＃34;或＆＃34;工具提示＆＃34;或者你有什么，是谁。因此，如果他们将鼠标悬停在上面的句子上（在＃34;但是＆＃34;和＃34;美国＆＃34;之间的任何地方），他们会看到类似于＆＃34;哈克说话的事情＆＃34;。

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

Answer 1

在段落标记

上建议title属性

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

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标签..而且你可以设置＆＃34;工具提示＆＃34;如你所愿。

Answer 3

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

＆＃13;

$("#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
    }
  }
});

＆＃13;

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

＆＃13;

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.silver.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1411/js/kendo.all.min.js"></script>

<br/>
<div id="tooltips">
  <div id="aTooltip" class="tts" title="Here is a tooltip">
    This is one
  </div>
  <p></p>
  <div id="aTooltip2" class="tts" title="Here is another tooltip">
    This is two
  </div>
  <p></p>
  <div id="aTooltip3" class="tts" title="Here is some other tooltip">
    This is three
  </div>
  <p></p>
</div>

＆＃13;

这对你有用吗？您可以根据需要编辑工具提示样式，使其比默认标题工具提示更漂亮，或者使用一些Kendo UI默认样式来处理工具提示。

您还可以在工具提示中添加动画。

Answer 4

为了添加@ 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;
}

已回答here on SO

最初我打算尝试提出一个jquery悬停功能，但我认为这更加整洁。

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

4 个答案: