add title attribute from css

Question

How to add title  mandatory  from css to the following        lt label class  mandatory  gt Name lt  label gt    mandatory   background-image url  media img required gif   background-position top right  background-repeat no-repeat  padding-right 10px  font-weight bold

User · Answer

On the one hand  the title is helpful as a tooltip when moving the mouse over the element  This could be solved with CSS- gt  element  after  But it is much more important as an aid for visually impaired people  topic handicap-free website   And for this it MUST be included as an attribute in the HTML element  Everything else is junk  botch  idiot stuff

User · Answer

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

User · Answer

As Quentin and other suggested this cannot totally be done with css partially done with content attribute of css   Instead you should use javascript jQuery to achieve this   JS   document getElementsByClassName  mandatory   0  title    mandatory     or using jQuery       mandatory   attr  title   mandatory       x000D   x000D  document getElementsByClassName  mandatory   0  setAttribute  title    mandatory    x000D   x000D      jmandatory   attr  title    jmandatory    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D  Place the Mouse Over the following elements to see the title  x000D   lt br  gt  lt br  gt  x000D   lt b gt  lt label class  mandatory  gt - gt Javascript Mandatory lt  label gt  lt  b gt  x000D   lt br  gt  lt br  gt  x000D   lt b gt  lt label class  jmandatory  gt - gt jQuery Mandatory lt  label gt  lt  b gt  x000D   x000D   x000D

User · Answer

Can do  with jQuery     document  ready function             mandatory   each function               this  attr  title     this  attr  class

User · Answer

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

User · Answer

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 it s 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

User · Answer

It is possible to imitate this with HTML  amp  CSS   If you really really want dynamically applied tooltips to work  this  not so performance and architecture friendly  solution can allow you to use browser rendered tooltips without resorting to JS  I can imagine situations where this would be better than JS   If you have a fixed subset of title attribute values  then you can generate additional elements server-side and let the browser read title from another element positioned above the original one using CSS   Example    x000D   x000D  div  x000D    position  relative  x000D    x000D  div  gt  span  x000D    display  none  x000D    x000D   x000D   pick-tooltip-1  gt   tooltip-1   pick-tooltip-2  gt   tooltip-2  x000D    display  block  x000D    position  absolute  x000D    width  100   x000D    height  100   x000D    top  0  x000D    left  0  x000D    x000D   lt div class  pick-tooltip-1  gt  x000D    Hover to see first tooltip x000D     lt span class  tooltip-1  title  Tooltip 1  gt  lt  span gt  x000D     lt span class  tooltip-2  title  Tooltip 2  gt  lt  span gt  x000D   lt  div gt  x000D   x000D   lt div class  pick-tooltip-2  gt  x000D    Hover to see second tooltip x000D     lt span class  tooltip-1  title  Tooltip 1  gt  lt  span gt  x000D     lt span class  tooltip-2  title  Tooltip 2  gt  lt  span gt  x000D   lt  div gt  x000D   x000D   x000D    Note  It s not recommended for large scale applications because of unnecessary HTML  possible content repetitions and the fact that your extra elements for tooltip would steal mouse events  text selection  etc

User · Answer

While currently not possible with CSS  there is a proposal to enable this functionality called Cascading Attribute Sheets

[html] add title attribute from css

Examples related to html

Examples related to css