css for the title of all spans of a certain class

Question

I'm using javascript to dynamically add spans to the html on my page, and giving those spans the class "query_error" and a dynamic title based on the value of err_msg, e.g,

"<span class=query_error title='" + err_msg + "'>" + replacement + "</span>"

(where "replacement" is simply the piece of text that has the query error). All this works fine, and I can apply css to the span with

.query_error{
    font-family: "Monaco", "Inconsolata", Courier, monospace;
    font-size: 15px;
    font-weight: bold;
    color: red;
}

But I can't figure out how to add css to the title itself so I can change the font color, size, etc. Is this possible (without using a plugin)?
TIA

See http://stackoverflow.com/questions/1055581/how-do-i-add-a-tool-tip-to-a-span-element - no you can't but there are some good alternatives there. — dash, Feb 05 '12 at 16:17

score 4 · Accepted Answer · answered Feb 05 '12 at 16:27

With CSS3 you can now target the [title] attribute but as to a real world solution i don't see any. I would rather suggest you used a plugin such as tipsy for that task, as it is more cross browser supported and less fuss.

This is a demo of a styled [title] attribute:

CSS

span:hover {
    color: red;
    position: relative;
}

span[title]:hover:after {
    content: attr(title);
    padding: 4px 8px;
    color: #333;
    position: absolute;
    left: 0;
    top: 100%;
    white-space: nowrap;
    z-index: 20px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0px 0px 4px #222;
    -webkit-box-shadow: 0px 0px 4px #222;
    box-shadow: 0px 0px 4px #222;
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
    background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}

Demo: http://jsfiddle.net/BvGHS/

Interesting, I did not know that. My browser's tooltip appears on top of it, though. — Lucius, Feb 05 '12 at 16:30
@Lucius yes, side effect that can't be avoided when targetting the [title] attribute. Again, don't see any real world application for this CSS, but its there! — Andres I Perez, Feb 05 '12 at 16:31

score 1 · Answer 2 · answered Feb 05 '12 at 16:13

1

Short answer, nop. The title attribute is that, a title and can't be styled. Long answer, you probably need a tooltip plugin for this which replaces the title with an html element.

answered Feb 05 '12 at 16:13

elclanrs

92,861
21
134
171

score 1 · Answer 3 · answered Feb 05 '12 at 16:14

The tooltip which appears when you move your cursor over an element with the optional title attribute is a browser feature and can, as far as I know, not be styled using CSS.

You can create your own custom tooltips using JavaScript. There are a couple of plug-ins and tutorials on the web.

css for the title of all spans of a certain class

3 Answers3