About
Explore
Events & Classes
Support Us
Join
Sign In
Lilla Mardiui
View Project Page
Run
Fullscreen
Charts
HTML
CSS
JS
<!-- Created by Lilla Mardiui, subject to copyright. You can use this in any of your projects, as long as you message me for permission. Once granted permission, you can then copy the CSS and configure it as you wish. Use the chart div and inside the chart div, you can add the bar div. Then use tooltip if you want to display something on it when hovered over. Don't forget to upvote this and follow me! :D --> <!DOCTYPE HTML> <html> <head> <title>Page Title</title> <meta charset='utf-8'> <meta name='author' content='Lilla Mardiui'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> </head> <body> <div class="chart row"> <div class="bar tooltip" style="margin-top: 300px;"><span class="tooltiptext">placeholder</span></div> <div class="bar tooltip" style="margin-top: 250px;"><span class="tooltiptext">placeholder</span></div> <div class="bar tooltip" style="margin-top: 200px;"><span class="tooltiptext">placeholder</span></div> <div class="bar tooltip" style="margin-top: 150px;"><span class="tooltiptext">placeholder</span></div> <div class="bar tooltip" style="margin-top: 100px;"><span class="tooltiptext">placeholder</span></div> <div class="bar tooltip" style="margin-top: 50px;"><span class="tooltiptext">placeholder</span></div> <div class="bar tooltip" style="margin-top: 0px;"><span class="tooltiptext">placeholder</span></div> <div class="bar tooltip" style="margin-top: -50px;"><span class="tooltiptext">placeholder</span></div> <div class="bar tooltip" style="margin-top: -100px;"><span class="tooltiptext">placeholder</span></div> <div class="bar tooltip" style="margin-top: -150px;"><span class="tooltiptext">placeholder</span></div> <div class="bar tooltip" style="margin-top: -200px;"><span class="tooltiptext">placeholder</span></div> <div class="bar tooltip" style="margin-top: -250px;"><span class="tooltiptext">placeholder</span></div> </div> </body> </html>
/* Configuration */ * { font-family: Arial; } /* Chart */ .chart { border: 2px solid black; width: 100%; height: 390px; overflow: hidden; } /* Row class */ .row { display: flex; flex-wrap: wrap; align-items: center; } /* Indivual Bar */ .bar { background-color: red; width: 20px; height: 100%; margin-left: 20px; margin-right: 20px; } /* Tooltip */ .tooltip { position: relative; display: inline-block; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; padding: 5px 0; border-radius: 6px; position: absolute; z-index: 1; top: -5px; left: 105%; } .tooltip:hover .tooltiptext { visibility: visible; } .tooltip .tooltiptext::after { content: " "; position: absolute; top: 50%; right: 100%; /* To the left of the tooltip */ margin-top: -5px; border-width: 5px; border-style: solid; border-color: transparent black transparent transparent; }
About
Explore
Events & Classes
Support Us
Join
Sign In
.png)