Is it possible to define a title attribute by class name?

Question

I would like to make all .note elements have a specific tooltip.

Is it possible to do this automatically, e.g. in CSS? Just like the note class has colors and a font defined, is it possible to bind the tooltip text (the title attribute) with that class?

I could make some function that iterates over all .note elements and append the title attribute if it's not present yet. However, since I don't have to iterate manually for CSS styles, I was wondering if there is a more elegant solution to this problem as well (e.g. is it possible to define it in CSS?).

Answer 1

You can't change the attributes of an element using CSS; you could, perhaps, emulate the title functionality, though (albeit only clumsily):

.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 will still allow the original title to show, so I'd suggest removing that attribute with JavaScript (or in a server side language).

Possible JavaScript title-removal method:

var notes = document.getElementsByClassName('note');
var notesNum = notes.length;

for (i=0; i<notesNum; i++){
    notes[i].removeAttribute('title');
}

JS Fiddle demo (combining the two approaches).

---

Edited, as the OP, from comments (below) doesn't want to change the existing look and feel, to add a JavaScript option to assigning a new title for all elements with the class-name of 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 2

That's not something that's within the scope of CSS. Your best bet is to use some JavaScript or JQuery.