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 に答える