是否可以按类名定义标题属性？

Question

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

Is it possible to do this automatically, eg 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 (eg 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.

Answer 3

As you asked the question with 'eg CSS', I'm presuming you want an answer as to how to use a class to assign a title. Like the other answers, jQuery or javascript is your best bet.

With jQuery, you can do:

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 carrying out action; you would need JavaScript for that sort of thing. You could use document.getElementsByClassName to get an array that you could for loop through setting those title attributes.

Answer 5

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