add title attribute from css
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/.
What you can do is style the label:after selector and give it display:none, and set its 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 {
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;
}
Quentin is correct, it can't be done with CSS. If you want to add a title
attribute, you can do it with JavaScript. Here's an example using jQuery:
$('label').attr('title','mandatory');
You can't. CSS is a presentation language. It isn't designed to add content (except for the very trivial with :before
and :after
).