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/