可以设置标题样式吗？ （并且使用CSS或js？）[重复]

Question

我想知道是否可以设计一个

title

:

<a href="#" title="This is a title">Hello</a>

造型问题有两个方面：

• 文本格式/编码（我猜这是可能的，所以在问题中这样做*）。
• 工具提示样式，你能把它弄大一点吗？其他颜色？等等

我遇到的另一个问题是你如何“指向”标题？

• 来自CSS
• 来自 Javascript / jQuery

提前致谢！

---

*我通过文本格式化/编码表示的内容：

Answer 1

您可以通过 HTML 实体在标题属性中添加换行符，以强制在文本中换行。现在大多数浏览器都支持这一点。这是您可以对浏览器的本机工具提示显示进行的唯一更改。

<a href="real_link" title="check&#13;&#10;this&#13;&#10;out">foo bar</a>

参见上面的示例在网页上。

正如其他人指出的那样，存在大量用于各种 JS 库的插件，用于制作可设置样式的自定义 HTML 工具提示。这是 Google 搜索“jquery tooltip 插件”的 热门，评论了 10 个此类插件。

Answer 2

:after

和

:hover

伪类创建纯 CSS 工具提示：<a href="#" class="class-with-tooltip" title=Tooltip>Link</a>

.class-with-tooltip:hover:after{
    content: attr(title);
    position: absolute;
    padding: 5px;
    border: 1px solid gray;
    background: whitesmoke;
    font-size: 14px;
}

我不确定这在旧浏览器中如何工作，但它适用于所有主要浏览器。

需要

position: absolute;

来防止生成的内容将标记推送到元素后面。

Answer 3

http://net.tutsplus.com/articles/news/你仍然无法创建 jquery 插件/

它描述了如何推出您自己的自定义 jQuery 插件，该插件将完全满足您的要求。

Answer 4

http://www.1stwebdesigner.com/freebies/stylish-jquery-tooltip-plugins-webdesign/

Answer 5

为元素分配一个类，然后在文档准备好后，设置该类的标题属性。例如...

$(".className").attr("title", "Your title here.");

Answer 6

试试这个。

http://flowplayer.org/tools/tooltip/index.html