add title attribute from css

Question

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

For anyone reading this in the future, you can create custom tooltips with CSS using pseudo elements you can either specify the text value in a custom data-* attribute or the content property. See this answer - stackoverflow.com/questions/1055581/… — Josh Crozier
– Josh Crozier, Commented Mar 11, 2015 at 18:50
For anyone wanting to use browser built-in tooltips for this, stackoverflow.com/a/46889216/1709903 — Slava
– Slava, Commented Oct 23, 2017 at 12:33

Volker E. · Accepted Answer · 2025-03-17 18:52:20Z

97

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

edited Mar 17 at 18:52

Volker E.

6,07411 gold badges50 silver badges66 bronze badges

answered Jun 8, 2014 at 2:47

Dolf Andringa

2,1701 gold badge23 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Camilo Martin Over a year ago

+1, you can even use data attributes as the source for the tooltip. Example fiddle. (This way your content remains in HTML, and your CSS again only is used to tell the browser how to show it).

Josh Crozier Over a year ago

1+ Here is a similar answer using custom data-* attributes for content stackoverflow.com/questions/1055581/… it also supports positioning.

earl3s Over a year ago

This should be the accepted answer. The question was, essentially, how can I add a tooltip using css? This answers it the best.

stephenmurdoch Over a year ago

I would avoid this sort of thing when the information is important, as otherwise it will not be available to screenreaders and a11y users.

geisterfurz007 Over a year ago

Note: :after should be replaced with ::after. While both work, it's technically not a pseudo-class but a pseudo-element which use a double colon.

|

Quentin · Accepted Answer · 2011-05-26 10:08:36Z

77

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

answered May 26, 2011 at 10:08

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Comments

newtron · Accepted Answer · 2011-05-26 10:12:18Z

19

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');

answered May 26, 2011 at 10:12

newtron

6,1341 gold badge26 silver badges19 bronze badges

3 Comments

Rajeev Over a year ago

I tried it $(".mandatory").attr('title','mandatory'); somehow the title doesnt show up

Rajeev Over a year ago

Yes i did but this was done in my base page where some other page can be included i dont know why its not working

newtron Over a year ago

can you post a link? hard to say without seeing it. try enclosing the above with $(document).ready(function() { and }); so that the jquery waits until the document (and thus target element) has loaded before running.

Slava · Accepted Answer · 2017-10-23 12:20:16Z

It is possible to imitate this with HTML & 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:

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: 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)

Lucky · Accepted Answer · 2016-08-12 09:37:27Z

4

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');

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>

edited Aug 12, 2016 at 9:37

answered May 5, 2015 at 7:39

Lucky

17.4k20 gold badges121 silver badges156 bronze badges

Comments

metaforce · Accepted Answer · 2011-05-26 10:13:26Z

3

Can do, with jQuery:

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

answered May 26, 2011 at 10:13

metaforce

1,3775 gold badges17 silver badges26 bronze badges

Comments

programmeruser · Accepted Answer · 2021-10-02 08:27:01Z

1

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

edited Oct 2, 2021 at 8:27

programmeruser

52 bronze badges

answered Apr 7, 2013 at 17:33

P Varga

20.4k14 gold badges77 silver badges118 bronze badges

Comments

SecretAgentMan · Accepted Answer · 2020-10-09 12:55:22Z

-1

On the one hand, the title is helpful as a tooltip when moving the mouse over the element. This could be solved with CSS-> 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 ...!

edited Oct 9, 2020 at 12:55

SecretAgentMan

2,8708 gold badges26 silver badges44 bronze badges

answered Oct 9, 2020 at 12:13

Kira-Bianca

691 silver badge2 bronze badges

Collectives™ on Stack Overflow

add title attribute from css

8 Answers 8

7 Comments

Comments

3 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

7 Comments

Comments

3 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related