从CSS添加标题属性
如何从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; } 你不能。 CSS是一种演示语言。 它不是为了添加内容而devise的（除了:before :after和:after之外的非常小的内容）。
那么，虽然实际上不可能改变title属性，但是可以从css中完全显示工具提示。 你可以在http://jsfiddle.net/HzH3Z/5/查看工作版本。;
你可以做的是风格的标签：select器，并给它显示：无，并设置它的内容从CSS。 然后，您可以将显示属性更改为显示：在标签上显示：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; }
昆汀是正确的，它不能用CSS来完成。 如果你想添加一个title属性，你可以用JavaScript来完成。 这里是一个使用jQuery的例子：
$('label').attr('title','mandatory');
可以用jQuery来做：
$(document).ready(function() { $('.mandatory').each(function() { $(this).attr('title', $(this).attr('class')); }); });
尽pipeCSS目前不可能实现，但是有一个build议来启用这个称为层叠属性表的function。
正如Quentin和其他人所build议的，这不能完全用css完成（部分用css的内容属性完成）。 相反，你应该使用JavaScript / jQuery来实现这一点，
JS：
document.getElementsByClassName("mandatory")[0].title = "mandatory";
或者使用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>
可以用HTML和CSS来模仿这个
如果你真的想dynamic应用工具提示工作，这（不是性能和架构友好）的解决scheme可以让你使用浏览器渲染的工具提示，而不诉诸JS。 我可以想像情况会比JS更好。
如果你有一个标题属性值的固定子集，那么你可以在服务器端生成额外的元素，并让浏览器使用CSS读取位于原始元素之上的另一个元素的标题。
例：
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>
