How we can create a progress bar with values in the tooltip? Solution: See this Bootstrap Tooltip Progress Bar Animation, Percentage Values in Tooltip.
Previously I have shared some progress bar programs, but this progress bar shows the values in tooltip or info card. Basically, A progress bar is a graphical control element used to visualize the progression of an operation. Also on the website we use to show other things like skills, comparison, etc. And The tooltip or info tip is a type of hint in a common graphical user interface element. We combined these two types of elements to create the program.
Today you will learn to create progress with Percentage Values in Tooltip. Basically, there are 6 progress bars for showing skills in codes like HTML, CSS, PHP, etc. And the bars have animation effects when it reaches 0 to its given percentage values. You will see the percentage values in a tooltip or infotip which is placed above the progress bar, where progress ends.
So, Today I am sharing Bootstrap Tooltip Progress Bar Animation. There I have used Bootstrap library to creating this program, it is HTML, CSS, JS library for creating responsive elements. The JS part has a few lines of codes that are based on jQuery and bootstrap JS. You can use this program on your website to showing your skills or anything else.
If you are thinking now how this progress bar animation actually is, then see the preview given below.
Preview Of Skills Progress With Infotip
See this video preview to getting an idea of how this progress animation looks like.
Now you can see this visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.
You May Also Like:
- Bootstrap Password Strength Validation
- Color Cross Text Reveal
- CSS Upload Animation
- JavaScript Quote Slider
Bootstrap Tooltip Progress Bar Animation Source Code
Before sharing source code, let’s talk about it. First I have created a section and bootstrap grid-based layouts using container, row, column, etc. Inside a progress bar div, I have placed many elements like div and span. There I have used HTML Data-* elements to store custom data, which are also in bootstrap’s pre-built functions.
Now using CSS I gave some values like color, border, etc. The program is based on bootstrap and it has own CSS file, that’s why there is very little part of custom CSS codes. Also, the JS file has a few lines of codes. It is animating the progress bar and shows values visually, according to HTML values. It increasing the width value of the bar.
Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this program you have to create 3 files. First file for HTML, second file for CSS, and the third file for JavaScript. Follow the steps to creating this without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
<!DOCTYPE html> <!--Code By Webdevtrick ( https://webdevtrick.com )--> <html lang="en" > <head> <meta charset="UTF-8"> <title> Tooltip Progress Bar | Webdevtrick.com</title> <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'> <link rel="stylesheet" href="style.css"> </head> <body> <section> <div class="container"> <div class="row"> <div class="col-md-8 col-lg-8"> <div class="barWrapper"> <span class="progressText"><B>HTML5</B></span> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" > <span class="popOver" data-toggle="tooltip" data-placement="top" title="90%"> </span> </div> </div> <div class="barWrapper"> <span class="progressText"><B>CSS3</B></span> <div class="progress "> <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="10" aria-valuemax="100" style=""> <span class="popOver" data-toggle="tooltip" data-placement="top" title="80%"> </span> </div> </div> </div> <div class="barWrapper"> <span class="progressText"><B>BOOTSTRAP</B></span> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"> <span class="popOver" data-toggle="tooltip" data-placement="top" title="60%"> </span> </div> </div> </div> <div class="barWrapper"> <span class="progressText"><B>JQUERY</B></span> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"> <span class="popOver" data-toggle="tooltip" data-placement="top" title="50%"> </span> </div> </div> </div> <div class="barWrapper"> <span class="progressText"><B>MYSQL</B></span> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"> <span class="popOver" data-toggle="tooltip" data-placement="top" title="85%"> </span> </div> </div> </div> <div class="barWrapper"> <span class="progressText"><B>PHP</B></span> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"> <span class="popOver" data-toggle="tooltip" data-placement="top" title="75%"> </span> </div> </div> </div> </section> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js'></script> <script src="function.js"></script> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ .tooltip{ position:relative; float:right; } .tooltip > .tooltip-inner { background-color: #ff4b4b; padding:5px 15px; color:#fff; font-weight:bold; font-size:13px; } .popOver + .tooltip > .tooltip-arrow { border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #ff4b4b;} section{ margin:100px auto; height:1000px; } .progress{ border-radius:0; overflow:visible; } .progress-bar{ background:rgb(23,44,60); -webkit-transition: width 1.5s ease-in-out; transition: width 1.5s ease-in-out; } |
function.js
The final step, create a JavaScript file named ‘function.js‘ and put the codes.
|
1 2 3 4 5 6 7 8 9 |
// Code By Webdevtrick ( https://webdevtrick.com ) $(function () { $('[data-toggle="tooltip"]').tooltip({trigger: 'manual'}).tooltip('show'); }); $(".progress-bar").each(function(){ each_bar_width = $(this).attr('aria-valuenow'); $(this).width(each_bar_width + '%'); }); |
That’s It. Now you have successfully created Bootstrap Tooltip Progress Bar Animation, Percentage Values in Tooltip. If you have any doubt or questions comment down below.
Thanks For Visiting, Keep Visiting.
