是否可以通过类名定义标题属性？答案

【问题标题】：Is it possible to define a title attribute by class name?是否可以通过类名定义标题属性？
【发布时间】：2011-08-07 21:19:21
【问题描述】：

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

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

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

【问题讨论】：

CSS 与表现和风格有关； title 属性是数据，而不是表示。
@cdhowie：事实上，标题实际上只是一个演示文稿，而不是数据。

标签： html css class tooltip title

【解决方案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).

Edited，作为 OP，来自 cmets（下）不想改变现有的外观和感觉，添加一个 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.

【讨论】：

很抱歉，我更喜欢常规的工具提示。我宁愿不改变外观和感觉。
没有必要为此道歉！ :) 请查看最新的编辑，其中显示了（应该）满足您需求的 JavaScript 解决方案。 :)
使用纯 Javascript 更改 Title 属性的绝佳答案。如果有人对 jQuery 解决方案感兴趣，请查看以下@Josh Allen stackoverflow.com/a/6975913/5323892 的答案

【解决方案2】：

这不在 CSS 范围内。最好的办法是使用一些 JavaScript 或 JQuery。

【讨论】：

【解决方案3】：

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

使用 jQuery，您可以：

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

这里有一个例子：http://jsfiddle.net/RdNvy/

【讨论】：

jQuery 的优秀答案。我想简化您的 jsfiddle 以查看所需的裸骨。结果很棒，即使 html 标签中没有 title="" ，即使 jquery 处理它也很好。 jsfiddle.net/RdNvy/42谢谢！

【解决方案4】：

CSS 用于样式而不是执行操作；你需要 JavaScript 来做那种事情。您可以使用 document.getElementsByClassName 来获取一个数组，您可以通过设置这些标题属性进行循环。

【讨论】：

事实上我目前正在这样做，我只是想知道是否可以像定义字体/颜色/等一样定义工具提示文本。我就这样继续下去。

【解决方案5】：

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

【讨论】：