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

Question

I would like to add a tooltip description to all elements according to their CSS class(es).

I know tooltips are typically set using the title attribute of the element, but since I have many such elements and the description would be the same (and fairly long), I don't want to set it this way to avoid pointless bloat, so I would rather define the text once separately and then somehow associate it with the particular classes.

From what I've gathered so far, it doesn't seem to be possible using mere HTML+CSS, which would be the ideal, but a concise Javascript/jQuery solution would be good too. Does anyone know how to do this?

Bonus points if the text could be concatenated on elements with multiple classes. :P

Answer 1

Using just CSS, you can try using this "tooltip" class:

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

Then you give your elements a specific class , say "test". In your CSS, you then include:

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

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

In the demo, I underlined the tooltip elements so you could see what to hover.

Answer 2

For future reference: Seeking a solution able to handle concatenation of tooltip text, I managed to come up with a simple jQuery one. Basically, for each class requiring such a description, add:

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