如何将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;
}
答案 0 :(得分:54)
你做不到。 CSS是一种表示语言。它不是为了添加内容而设计的(:before
和:after
非常简单。)
答案 1 :(得分:51)
嗯,虽然实际上无法更改title属性,但可以完全从css中显示工具提示。 您可以在http://jsfiddle.net/HzH3Z/5/检查工作版本。
你可以做的是设置标签的样式:在选择器之后并给它display:none,并从css设置它的内容。然后,您可以将display属性更改为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;
}
答案 2 :(得分:17)
Quentin是正确的,用CSS无法完成。如果要添加title
属性,可以使用JavaScript执行此操作。这是一个使用jQuery的例子:
$('label').attr('title','mandatory');
答案 3 :(得分:3)
可以使用jQuery:
$(document).ready(function() {
$('.mandatory').each(function() {
$(this).attr('title', $(this).attr('class'));
});
});
答案 4 :(得分:2)
正如Quentin和其他人所说,这不能完全用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>
答案 5 :(得分:1)
虽然目前无法使用CSS,但有人建议启用名为Cascading Attribute Sheets的此功能。
答案 6 :(得分:1)
有可能用HTML&amp; CSS
如果你真的想要动态应用工具提示工作,这个(不是性能和架构友好的)解决方案可以让你使用浏览器渲染的工具提示,而无需诉诸JS。我可以想象这会比JS更好的情况。
如果您有一个固定的title属性值子集,那么您可以在服务器端生成其他元素,并让浏览器使用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;
}
&#13;
<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>
&#13;
注意:不推荐用于大型应用程序,因为不必要的HTML,可能的内容重复以及工具提示的额外元素会窃取鼠标事件(文本选择等)这一事实
答案 7 :(得分:0)
一方面,将鼠标移到元素上时,标题作为工具提示很有用。这可以通过CSS-> element :: after解决。 但是,作为视力障碍者的辅助工具(无主题障碍的网站),这一点更为重要。为此,它必须作为属性包含在HTML元素中。其他所有东西都是垃圾,笨蛋,白痴……!