标题的样式可以吗？(使用CSS或js?)

Question

我想知道是否有可能设计一个title

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

造型问题有两个方面：

• 文本格式化/编码(我猜这是可能的，在问题*中也是如此)。
• 工具提示样式的，你能让它更大吗？其他颜色？等。

我的另一个问题是，您如何将“指向”命名为

• 来自CSS
• 来自Javascript / jQuery

提前感谢！

*采用文字格式/编码的内容：

​

​

Answer 1

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

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

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

正如其他人所指出的，各种JS库都有大量插件可用于定制HTML工具提示，这些工具提示是可样式的。以下是谷歌搜索"jquery“的最受欢迎，回顾了10个这样的插件。

Answer 2

您可以使用:after和:hover伪类创建CSS专用工具提示：

<a href="#" class="class-with-tooltip">Link</a>

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

我不知道这在旧浏览器中是如何工作的，但它在所有主流浏览器中都能工作。

需要使用position: absolute;来防止生成的内容在元素之后推送标记。

Answer 3

在CSS中这是不可能的，因为工具提示弹出是一个操作系统原生的东西，但请看本教程(文章+屏幕+源代码)：http://net.tutsplus.com/articles/news/you-still-cant-create-a-jquery-plugin/它描述了如何滚动您自己的自定义jQuery插件，它将完全满足您的要求。