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 Fiddle demo

但是，使用此功能仍然可以显示原始title，因此我建议使用JavaScript（或服务器端语言）删除该属性。

可能的JavaScript标题删除方法：

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)

编辑，作为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 Fiddle demo

Answer 2

这不属于CSS的范畴。最好的办法是使用一些JavaScript或JQuery。

Answer 3

正如您提出的问题'例如' CSS'，我假设您想要一个关于如何使用类来分配标题的答案。像其他答案一样，jQuery或javascript是你最好的选择。

使用jQuery，您可以：

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

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

Answer 4

CSS用于造型而不是用于执行操作;你需要JavaScript才能做到这一点。您可以使用document.getElementsByClassName来获取一个可以循环设置这些标题属性的数组。

Answer 5

我不确定，但试着掠夺css“content”属性。 http://www.w3schools.com/cssref/pr_gen_content.asp

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

5 个答案: