0

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

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

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

如果文本可以连接到具有多个类的元素上，则可以加分。:P

4

2 回答 2

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";
}

演示：http: //jsfiddle.net/ec2Tx/

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

于 2013-04-30T17:28:23.097 回答
0

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

$(".classX").hover(
    function() {
        var previous = $(this).attr('title') || '';
        var descr    = "description X"
        $(this).attr('title', previous + descr);
    }, function() { $(this).attr('title', ''); }
);
于 2013-05-01T13:06:55.630 回答