css for the title of all spans of a certain class - css

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

Answer 1

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/

Answer 2

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.

Answer 3

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.