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

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 😉