Geek Answers Handbook

How to make the progress bar visible when it hangs

It will probably be very simple, although I cannot find the right solution for my problem. What I want is the following: when the user hovers over the progress bar, the progress bar shows the progressbar value in a small pop-up window or something like that. You can probably figure out what I'm trying to say :)

my html5 code is:

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

I am a very noob in html 5 and hang.

+6
source share
3 answers

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

HTML:

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

CSS

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

Here is a working example: jsFiddle

You can create this pseudo-element so that it looks like a pop-up window or whatever, -)

+6
source

Use :before

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

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

+4
source

It is a little inelegant, but it works. Attach the onmouseover and onmouseout to the execution line to show and hide the div . It can be placed at will.

 <progress id="progressBar" value="0" max="100" onmouseover="a=document.getElementById('stat'); a.innerHTML=this.value; a.style.display='block'" onmouseout="document.getElementById('stat').style.display='none'"> </progress> <div id="stat"></div>
+1
source

More articles:


All Articles