是否可以设置标题样式？（并使用 CSS 或 js？）

IT技术 javascript html css styling
2021-02-19 14:45:59

我想知道是否可以设置样式title：

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

造型问题有两个方面：

  • 文本格式/编码（我猜这是可能的，所以在问题中这样做了*）。
  • Tooltip 样式，你可以让它更大吗？其他颜色？等等。

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

  • 来自CSS
  • 来自Javascript / jQuery

提前致谢！

*我提到的文本格式/编码：

替代文字

6个回答

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

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

请参阅网页上的上述示例。

正如其他人指出的那样，存在大量用于各种 JS 库的插件，用于制作可样式化的自定义 HTML 工具提示。这是谷歌搜索“jquery 工具提示插件”的热门搜索，回顾了 10 个这样的插件。

您可以使用: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;需要，以防止产生的内容从所述元件后推的标记。

此解决方案不适用于 :text(like input, select) 元素，但它仍然是一个很好的解决方案。
2021-04-24 14:45:59
更好的是使用content: attr(title); 但是通过这两种方式，您仍然可能希望抑制默认浏览器行为，因此可能仍然需要 JavaScript。
2021-04-27 14:45:59

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

没问题，伙计！我一直在查看那个网站，它充满了非常有用的教程和技巧。
2021-04-21 14:45:59
非常好的参考（不仅适用于工具提示）谢谢！
2021-05-07 14:45:59

您不能在默认标题属性上直接使用 CSS，但您可以使用许多 JQuery 工具提示插件来创建新的工具提示以及您可以使用 CSS 设置样式的工具提示。

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

@Zote 阅读理解失败 - CSS != JS。
2021-05-03 14:45:59
他可以！你是说他可以用jQuery来做。如果 jQuery 可以，那么纯 js 是可能的。对不起，-1。
2021-05-13 14:45:59

您可以使用 jQuery 来完成，但不需要插件。

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

$(".className").attr("title", "Your title here.");
其它你可能感兴趣的问题
上一篇将 javascript 用于自定义目的 下一篇JavaScript 对象解构和别名