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](http://stackoverflow.com/questions/1055581/how-do-i-add-a-tool-tip-to-a-span-element/25836471#25836471) you can either specify the text value in a custom `data-*` attribute or the `content` property. See this answer - http://stackoverflow.com/questions/1055581/how-do-i-add-a-tool-tip-to-a-span-element/25836471#25836471 — Josh Crozier, Mar 11 '15 at 18:50
For anyone wanting to use browser built-in tooltips for this, https://stackoverflow.com/a/46889216/1709903 — Slava, Oct 23 '17 at 12:33

score 91 · Answer 1 · edited Jan 09 '22 at 00:53

91

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 Jan 09 '22 at 00:53

Mario Petrovic

7,500
14
42
62

answered Jun 08 '14 at 02:47

Dolf Andringa

2,010
1
22
36

9

+1, you can even use data attributes as the source for the tooltip. [Example fiddle](http://jsfiddle.net/HzH3Z/54/). (This way your content remains in HTML, and your CSS again only is used to tell the browser how to show it). – Camilo Martin Aug 31 '14 at 01:32
1

1+ Here is a [similar answer using custom `data-*` attributes](http://stackoverflow.com/questions/1055581/how-do-i-add-a-tool-tip-to-a-span-element/25836471#25836471) for content http://stackoverflow.com/questions/1055581/how-do-i-add-a-tool-tip-to-a-span-element/25836471#25836471 it also supports positioning. – Josh Crozier Mar 11 '15 at 18:52
4

This should be the accepted answer. The question was, essentially, how can I add a tooltip using css? This answers it the best. – earl3s Feb 23 '17 at 18:48
3

I would avoid this sort of thing when the information is important, as otherwise it will not be available to screenreaders and a11y users. – stephenmurdoch Oct 19 '17 at 18:04
I agree @stephenmurdoch that is definitely a concern. – Dolf Andringa Oct 23 '17 at 05:26
Both a11y and i18n would be an issue for the content coming from the CSS. – Ritesh Jagga Oct 09 '20 at 12:57
1

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. – geisterfurz007 Dec 04 '20 at 13:08

score 74 · Accepted Answer · answered May 26 '11 at 10:08

74

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 '11 at 10:08

Quentin

914,110
126
1,211
1,335

score 19 · Answer 3 · answered May 26 '11 at 10:12

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 '11 at 10:12

newtron

5,938
1
23
19

I tried it $(".mandatory").attr('title','mandatory'); somehow the title doesnt show up – Rajeev May 26 '11 at 10:14
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 – Rajeev May 26 '11 at 10:21
1

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. – newtron May 26 '11 at 10:25

Lucky · Answer 4 · 2016-08-12T09:37:27.350

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>

score 4 · Answer 5 · answered Oct 23 '17 at 12:20

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)

score 3 · Answer 6 · answered May 26 '11 at 10:13

3

Can do, with jQuery:

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

answered May 26 '11 at 10:13

metaforce

1,337
5
17
26

score 1 · Answer 7 · edited Oct 02 '21 at 08:27

1

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

edited Oct 02 '21 at 08:27

programmeruser

5
2

answered Apr 07 '13 at 17:33

P Varga

19,174
12
70
108

score -1 · Answer 8 · edited Oct 09 '20 at 12:55

-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 09 '20 at 12:55

SecretAgentMan

2,856
7
21
41

answered Oct 09 '20 at 12:13

Kira-Bianca

59
1
2

add title attribute from css

8 Answers8

Linked

Related