Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

add title attribute from css

Tags:

html

css

How to add title='mandatory' from css to the following

     <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; } 
like image 759
Rajeev Avatar asked May 26 '11 10:05

Rajeev


People also ask

How do you give a title in CSS?

Using Title CSS, you'd do the following: For any global CSS class, use a capitalized name (title case). For any modifier or descendant class, use a lowercase letter for the beginning of th name. This means with Title CSS you capitalize any class name that will get referenced in the stylesheet without a parent class.

Can we add CSS in title tag?

You can apply CSS to the <title> element, but not though the style attribute (since it is for "All elements but BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE").

Can I style title attribute?

You can't style an actual title attribute It's not possible for a webpage to apply any style to the tooltip that the browser displays based on the title attribute. However, you can create something very similar using other attributes.


2 Answers

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; } 
like image 165
Dolf Andringa Avatar answered Sep 19 '22 18:09

Dolf Andringa


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

like image 26
Quentin Avatar answered Sep 20 '22 18:09

Quentin