Html 从 css 添加标题属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6136855/
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
add title attribute from css
提问by Rajeev
How to add title='mandatory' from css to the following
如何将 css 中的 title='mandatory' 添加到以下内容
<label class='mandatory'>Name</label>
.mandatory
{
background-image:url(/media/img/required.gif);
background-position:top right;
background-repeat:no-repeat;
padding-right:10px;
font-weight:bold;
}
采纳答案by Quentin
You can't. CSS is a presentation language. It isn't designed to add content (except for the very trivial with :beforeand :after).
你不能。CSS 是一种表示语言。它不是为了添加内容而设计的（除了非常琐碎的:before和:after）。
回答by Dolf Andringa
Well, although it's not actually possible to change the title attribute, it is possible to show a tooltip completely from css. You can check a working version out at http://jsfiddle.net/HzH3Z/5/.
好吧，虽然实际上不可能更改标题属性，但可以完全从 css 显示工具提示。您可以在http://jsfiddle.net/HzH3Z/5/查看工作版本。
What you can do is style the label:after selector and give it display:none, and set it's content from css. You can then change the display attribute to display:block on label:hover:after, and it will show. Like this:
您可以做的是设置 label:after 选择器的样式并给它 display:none，然后从 css 设置它的内容。然后，您可以将显示属性更改为 display:block on label:hover:after，它将显示。像这样：
label:after{
content: "my tooltip";
padding: 2px;
display:none;
position: relative;
top: -20px;
right: -30px;
width: 150px;
text-align: center;
background-color: #fef4c5;
border: 1px solid #d4b943;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-ms-border-radius: 2px;
border-radius: 2px;
}
label:hover:after{
display: block;
}
回答by newtron
Quentin is correct, it can't be done with CSS. If you want to add a titleattribute, you can do it with JavaScript. Here's an example using jQuery:
Quentin 是对的，它不能用 CSS 来完成。如果你想添加一个title属性，你可以用 JavaScript 来完成。下面是一个使用 jQuery 的例子：
$('label').attr('title','mandatory');
回答by metaforce
Can do, with jQuery:
可以做，用 jQuery：
$(document).ready(function() {
$('.mandatory').each(function() {
$(this).attr('title', $(this).attr('class'));
});
});
回答by Alph.Dev
It is possible to imitate this with HTML & CSS
可以用 HTML 和 CSS 模仿这个
If you really really want dynamically applied tooltips to work, this (not so performance and architecture friendly) solution can allow you to use browser rendered tooltips without resorting to JS. I can imagine situations where this would be better than JS.
如果你真的希望动态应用的工具提示起作用，这个（对性能和架构不太友好）解决方案可以让你使用浏览器呈现的工具提示，而无需求助于 JS。我可以想象这会比 JS 更好的情况。
If you have a fixed subset of title attribute values, then you can generate additional elements server-side and let the browser read title from another element positioned above the original one using CSS.
如果您有一个固定的 title 属性值子集，那么您可以在服务器端生成额外的元素，并让浏览器使用 CSS 从位于原始元素上方的另一个元素读取标题。
Example:
例子：
div{
position: relative;
}
div > span{
display: none;
}
.pick-tooltip-1 > .tooltip-1, .pick-tooltip-2 > .tooltip-2{
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}<div class="pick-tooltip-1">
Hover to see first tooltip
<span class="tooltip-1" title="Tooltip 1"></span>
<span class="tooltip-2" title="Tooltip 2"></span>
</div>
<div class="pick-tooltip-2">
Hover to see second tooltip
<span class="tooltip-1" title="Tooltip 1"></span>
<span class="tooltip-2" title="Tooltip 2"></span>
</div>Note: It's not recommended for large scale applications because of unnecessary HTML, possible content repetitions and the fact that your extra elements for tooltip would steal mouse events (text selection, etc)
注意：不推荐用于大型应用程序，因为不必要的 HTML、可能的内容重复以及工具提示的额外元素会窃取鼠标事件（文本选择等）
回答by Lucky
As Quentin and other suggested this cannot totally be done with css(partially done with content attribute of css). Instead you should use javascript/jQuery to achieve this,
正如 Quentin 和其他人所建议的，这不能完全用 css 完成（部分用 css 的 content 属性完成）。相反，您应该使用 javascript/jQuery 来实现这一点，
JS:
JS：
document.getElementsByClassName("mandatory")[0].title = "mandatory";
or using jQuery:
或使用 jQuery：
$('.mandatory').attr('title','mandatory');
document.getElementsByClassName('mandatory')[0].setAttribute('title', 'mandatory');
$('.jmandatory').attr('title', 'jmandatory');<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Place the Mouse Over the following elements to see the title,
<br/><br/>
<b><label class="mandatory">->Javascript Mandatory</label></b>
<br/><br/>
<b><label class="jmandatory">->jQuery Mandatory</label></b>回答by ???
While currently not possible with CSS, there is a proposal to enable this functionality called Cascading Attribute Sheets.
虽然目前无法使用 CSS，但有一项提议可以启用此功能，称为Cascading Attribute Sheets。
