Jquery CSS内容类而不是attr

我想将现有的标记传递给使用css构建的工具提示，当前使用attr（title），但必须复制标记以获得所需的结果

考虑：

<p class="toolTip" title="this is a tooltip">hover over me</p>
<p class="existing">this is a tool tip</p>


.toolTip:hover:after{
    content: attr(title);
}

tl:dr；我希望使用类从现有标记中提取内容，而不是使用title属性。

对于纯CSS（甚至是预处理器），没有真正的方法来选择元素的整个文本内容并将其分配给

内容

属性。属性只能具有预定义的字符串、URL、属性值或计数器作为值

您可以使用jQuery（或普通JS）自动将

工具提示

类和

标题

属性添加到具有所需类（

.existing

）的所有元素，并将元素的文本内容分配给该属性。这样，您就不必重复CSS规则

注意：这只是一个关于如何将元素的内容设置为其title属性的简单示例，但在实际场景中，您需要更多，因为将实际内容本身设置为工具提示没有多大意义

$（文档）.ready（函数（）{
$（'.existing'）.addClass（'toolTip'）；
$（'.existing'）。每个（函数（）{
$（this.attr（'title'，$（this.text（））；
});
});
。工具提示：悬停：之后{
内容：attr（title）；
/*只是为了演示*/
位置：相对位置；
左：10px；
边框：1px纯绿色；
背景：浅绿色；
填充：2px；
边界半径：2px；
}

将鼠标悬停在我身上
这是一个工具提示
您建议继承吗？如果是，那么在传统的css3中是不可能的。你必须使用更少的预处理器。为什么特别是class属性？@i_like_robots不必是class，但所讨论的元素上只有class。可以是任何东西，只要我不需要复制所有的标记。@Harry这可以用jQuery完成吗？我很乐意运行几行jQuery来实现这一点。任何可以避免人们在将来编辑标记区域的内容。谢谢@Harry我想我必须使用jQuery来实现这一点，没什么大不了的！：）谢谢大家的帮助@Harry！：）总是很高兴能帮上忙，朋友@Myles
.toolTip:hover:after{
    content: class(existing);  //invalid I know!
}