Can the title attribute be identified by the class name?

Question

I would like all .note elements .note have a specific hint.

Is it possible to do this automatically, for example. in CSS? Just as the note class has colors and a specific font, is it possible to associate the tooltip text ( title attribute) with this class?

I could perform some function that iterates over all .note elements and adds a title attribute if it is not already present. However, since I don’t have to manually iterate over CSS styles, I was wondering if there is a more elegant solution to this problem (for example, is it possible to define it in CSS?).

Answer 1

This is not something that is within CSS. It is best to use JavaScript or jQuery.

Answer 2

You cannot change the attributes of an element using CSS; you could possibly emulate the functionality of the title , though (albeit awkwardly):

 .note { position: relative; } .note:after { content: "The alternate 'pseudo-title' text for the .note elements."; position: absolute; left: 50%; background-color: #000; color: #fff; } 

JS Fiddle demo .

However, using this parameter will still allow you to show the original title , so I would suggest removing this attribute using JavaScript (or in a server-side language).

Possible way to remove JavaScript header:

 var notes = document.getElementsByClassName('note'); var notesNum = notes.length; for (i=0; i<notesNum; i++){ notes[i].removeAttribute('title'); } 

JS Fiddle demo (combining two approaches) .

---

Edited because the OP, from the comments (below), does not want to change the existing appearance, add a JavaScript parameter to assign a new title to all elements with the class name note :

 var notes = document.getElementsByClassName('note'); var notesNum = notes.length; var newTextForNotesClass = "This is the new title text for the notes-class-name group."; for (i=0; i<notesNum; i++){ notes[i].title = newTextForNotesClass; } 

JS Fiddle demo .

Answer 3

How did you ask a question with 'for example. CSS ', I assume that you want an answer on how to use a class to name it. Like the other answers, jQuery or javascript is your best bet.

With jQuery you can:

 tooltip = "Tooltip Text"; $('.note').attr('title', tooltip); 

Here is a fiddle with an example: http://jsfiddle.net/RdNvy/

Answer 4

CSS is for styling, not for actions; you need javascript to do this. You can use document.getElementsByClassName to get an array that you could use to create loops using these title attributes.

Answer 5

I'm not sure, but try to rob the css "content" property. http://www.w3schools.com/cssref/pr_gen_content.asp