Add title attribute from css

Question

How to add title = 'required' from css to next

<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; } 

Answer 1

You can not. CSS is a presentation language. It is not intended to add content (except for the very trivial with :before and :after ).

Answer 2

Well, although it is actually not possible to change the title attribute, you can open the tooltip completely from css. You can check the working version at http://jsfiddle.net/HzH3Z/5/ .

What you can do is stylize the label: after the selector and give it a display: none and set its contents from css. You can then change the display attribute to display: the block on the label: hover: after, and it will be displayed. 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; } 

Answer 3

Quentin is correct, this cannot be done with CSS. If you want to add a title attribute, you can do this using JavaScript. Here is an example using jQuery:

 $('label').attr('title','mandatory'); 

Answer 4

Maybe with jQuery:

 $(document).ready(function() { $('.mandatory').each(function() { $(this).attr('title', $(this).attr('class')); }); }); 

Answer 5

It’s currently not possible to use CSS; there is a suggestion to enable this functionality called Cascading attribute tables .

Answer 6

As Quentin and others said, this cannot be done using css (partly with the content css attribute). Instead, you should use javascript / jQuery to achieve this,

JS:

 document.getElementsByClassName("mandatory")[0].title = "mandatory"; 

or using 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> 

Answer 7

You can imitate this with HTML and CSS.

If you really want dynamically applied tooltips to work, this solution (not so productive and architectural) can allow you to use tooltips using a browser without resorting to using JS. I can imagine situations where it would be better than JS.

If you have a fixed subset of the value of the title attribute, you can create additional elements on the server side and let the browser read the title from another element above the original using 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. This is not recommended for large-scale applications due to unnecessary HTML, possible repetitions of the content, and the fact that your additional elements for the tooltip will steal mouse events (text selection, etc.).