Question

我想根据他们的CSS类为所有元素添加工具提示描述。

我知道工具提示通常是使用元素的title属性设置的，但由于我有很多这样的元素并且描述相同（而且相当长），我不想将它设置为避免毫无意义膨胀的方法，所以我宁愿单独定义文本，然后以某种方式将其与特定类相关联。

从我到目前为止收集的内容来看，似乎不太可能只使用HTML + CSS，这将是理想的，但简洁的Javascript / jQuery解决方案也会很好。有谁知道怎么做？

如果文本可以在具有多个类的元素上连接，则获得奖励积分。：P

Answer 1

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

.tooltip:after {
    display: none;
}

.tooltip:hover:after {
    display: inline;
    position: absolute;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 1px 1px 4px #000;
    background-color: #fff;
    margin-left: 5px;
    margin-top: -25px;
    padding: 3px;
}

然后你给你的元素一个特定的class，说“测试”。在CSS中，您可以包括：

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

DEMO： http://jsfiddle.net/ec2Tx/

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

Answer 2

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

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

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

2 个答案: