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

Question

我想让所有.note元素都有一个特定的工具提示.

是否可以自动执行此操作,例如在CSS中？就像note类有颜色和定义的字体一样,是否可以将工具提示文本(title属性)与该类绑定？

我可以创建一些迭代所有.note元素的函数,title如果它还没有存在则附加属性.但是,由于我不必手动迭代CSS样式,我想知道是否有更优雅的解决方案来解决这个问题(例如,是否可以在CSS中定义它？).

Answer 1

您无法使用CSS更改元素的属性; 或许,您可以模拟title功能(虽然只是笨拙):

.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小提琴演示.

但是使用它仍然会允许原始title显示,所以我建议用JavaScript(或服务器端语言)删除该属性.

可能的JavaScript标题删除方法:

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

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

JS Fiddle演示(结合两种方法).

编辑,作为OP,来自评论(下面)不想改变现有的外观,添加JavaScript选项为所有元素分配一个新标题,其类名为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小提琴演示.

Answer 2

这不是CSS范围内的东西.最好的办法是使用一些JavaScript或JQuery.

Answer 3

当您用“例如CSS”问这个问题时，我假设您想要一个有关如何使用类分配标题的答案。像其他答案一样，jQuery或javascript是最好的选择。

使用jQuery，您可以执行以下操作：

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

这是一个带有示例的小提琴：http : //jsfiddle.net/RdNvy/