Javascript 将工具提示文本与其元素分开设置

我想根据CSS类向所有元素添加工具提示说明

我知道工具提示通常是使用元素的

title

属性设置的，但是由于我有很多这样的元素，并且描述是相同的（而且相当长），我不想这样设置以避免无意义的膨胀，因此，我宁愿单独定义文本一次，然后以某种方式将其与特定类关联起来

从我到目前为止收集的信息来看，仅仅使用HTML+CSS似乎是不可能的，这将是理想的，但是一个简洁的Javascript/jQuery解决方案也会很好。有人知道怎么做吗

---

如果文本可以连接到具有多个类的元素上，则可获得额外积分：P

仅使用CSS，您可以尝试使用此“工具提示”类：

然后给元素指定一个特定的

类

，比如“test”。然后，在CSS中包括：

.test:after {
    content: "Whatever text you want";
}

演示：

---

在演示中，我在工具提示元素上画了下划线，以便您可以看到悬停的内容。

供将来参考：为了寻找能够处理工具提示文本串联的解决方案，我设法想出了一个简单的jQuery解决方案。基本上，对于需要此类描述的每个类，添加：

$(".classX").hover(
    function() {
        var previous = $(this).attr('title') || '';
        var descr    = "description X"
        $(this).attr('title', previous + descr);
    }, function() { $(this).attr('title', ''); }
);

---

非常感谢。巧妙的技巧。毕竟，看起来只使用纯CSS是可能的！我想工具提示内容的连接对于这个方法来说是太多了，尽管。。。

$(".classX").hover(
    function() {
        var previous = $(this).attr('title') || '';
        var descr    = "description X"
        $(this).attr('title', previous + descr);
    }, function() { $(this).attr('title', ''); }
);