从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>