How to make the value of the progress bar visible when hovering

Question

It will probably be very simple though I cannot find a proper solution for my problem. What I want is the following, when a user hovers over the progressbar, the progress bar gives the value of progressbar in a small popup screen or something like that. You can probably figure out what I am trying to say :)

my html5 code:

<progress id="progressBar" value="50" max="100"></progress>

I am very noob at html 5 and the hover thingy.

Answer 1

Use :before

progress#progressBar:hover:before {
    display: inline;
    content: attr(value);
}

Fiddle: http://jsfiddle.net/U58Tp/

Answer 2

you can do it with simple CSS using attr() and pseudo element.

HTML:

<progress id="progressBar" value="50" max="100"></progress>

CSS:

progress#progressBar:hover:after {
    display: block;
    content: attr(value);
}

​

Here is working example: jsFiddle

You can style this pseudo element, so it will look like "popup screen" or whatever you want ;-)