Javascript 是否可以设置标题样式？（并使用 CSS 或 js？）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4383148/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to style a title? (and with CSS or js?)
提问by Trufa
I was wondering if it was possible to style a title:
我想知道是否可以设置样式title：
<a href="#" title="This is a title">Hello</a>
The styling question has two aspects:
造型问题有两个方面：
- Text formatting/ encoding (Which I guess is possible SO does it in questions*).
- The Tooltip styling, can you make it bigger? other colors? etc.
- 文本格式/编码（我猜这是可能的，所以在问题中这样做了*）。
- Tooltip 样式，你可以让它更大吗？其他颜色？等等。
And the other issue I have is how do you "point" to title?
我的另一个问题是你如何“指向”标题？
- From CSS
- From Javascript/ jQuery
- 来自CSS
- 来自Javascript/ jQuery
Thanks in advance!
提前致谢！
*What I ment by text formatting / encoding:
*我提到的文本格式/编码：
采纳答案by Phrogz
You can put newlines in your title attribute via HTML entities to force a line break in the text. Most browsers these days support this. This is the only change you can make to the native tooltip display of the browser.
您可以通过 HTML 实体在 title 属性中放置换行符以强制在文本中换行。现在大多数浏览器都支持这一点。这是您可以对浏览器的本机工具提示显示进行的唯一更改。
<a href="real_link" title="check this out">foo bar</a>
See the above example on a web page.
请参阅网页上的上述示例。
As others have pointed out, there exist a large number of plugins for various JS libraries for making custom HTML tooltips which arestyleable. Here is the top hitfor the Google search "jquery tooltip plugin", reviewing 10 such plugins.
正如其他人指出的那样，存在大量用于各种 JS 库的插件，用于制作可样式化的自定义 HTML 工具提示。这是谷歌搜索“jquery 工具提示插件”的热门搜索，回顾了 10 个这样的插件。
回答by Shimon Rachlenko
You can create a CSS-only tooltips using the :afterand :hoverpseudo-class:
您可以使用: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;
}
I'm not sure how this going to work in old browsers, but it works in all major browsers.
我不确定这将如何在旧浏览器中工作，但它适用于所有主要浏览器。
The position: absolute;is needed to prevent generated content from pushing the markup after the element.
的position: absolute;需要，以防止产生的内容从所述元件后推的标记。
回答by mingos
It is not possible in CSS, since the tooltip popup is an OS native thingy, but please have a look at this tutorial (article + screencast + source code): http://net.tutsplus.com/articles/news/you-still-cant-create-a-jquery-plugin/It describes how to roll your very own custom jQuery plugin that will do exactly what you are asking for.
在 CSS 中这是不可能的，因为工具提示弹出窗口是操作系统原生的东西，但请看一下本教程（文章 + 截屏视频 + 源代码）：http: //net.tutsplus.com/articles/news/you- still-cant-create-a-jquery-plugin/它描述了如何推出您自己的自定义 jQuery 插件，该插件将完全满足您的要求。
回答by Daniel A. White
You can't use straight CSS on the default title attribute, but you can use many JQuery tooltip plugins available to create new tool tips and those you can style with CSS.
您不能在默认标题属性上直接使用 CSS，但您可以使用许多 JQuery 工具提示插件来创建新的工具提示以及您可以使用 CSS 设置样式的那些插件。
http://www.1stwebdesigner.com/freebies/stylish-jquery-tooltip-plugins-webdesign/
http://www.1stwebdesigner.com/freebies/stylish-jquery-tooltip-plugins-webdesign/
回答by Alan M.
You can do it with jQuery but there's no need for a plugin.
您可以使用 jQuery 来完成，但不需要插件。
Assign the element(s) a class and then, after the document is ready, set the title attribute for that class. For instance...
为元素分配一个类，然后在文档准备好后，为该类设置标题属性。例如...
$(".className").attr("title", "Your title here.");
回答by mr.b
No. There is no way you can style the "title" attribute of any HTML element. However, I would agree that there are many jquery plugins available to style the tooltip using the title attribute.
不可以。您无法为任何 HTML 元素的“title”属性设置样式。但是，我同意有许多 jquery 插件可用于使用 title 属性设置工具提示的样式。
