Text situated under a stylish Css bar

I want to create a bar chart to display the number of surveys that are completed, not started, and not available. The bars should also show the actual numbers below them, similar to this example
https://i.sstatic.net/8miIs.png

Currently, I have the following bar styling: 

.bar {
  height: 2em;
  display: flex;
  border: 3px solid darkgrey;
  border-radius: 1px;
  background-color: #484848;
  background-image: linear-gradient(to top, #535353, #919191);
  background-repeat: repeat-x;
}

.div1 {
  height: 2em;
  width: 50%;
  background-color: #65ea4e;
  background-image: linear-gradient(to top, #5abe43, #64ed4e);
  background-repeat: repeat-x;
}

.div1:hover {
  content: 'Completed';
}

.div2 {
  height: 2em;
  width: 20%;
  background-color: red;
  background-image: linear-gradient(to top, darkred, red);
  background-repeat: repeat-x;
}

.div1:hover .tooltiptext {
  visibility: visible;
}

.div2:hover .tooltiptext {
  visibility: visible;
}

.tooltiptext {
  position: relative;
  display: inline-block;
  visibility: hidden;
  margin-top: 2em;
  background-color: #484848;
  color: white;
  padding: 3px;
  border-radius: 5px;
}
<div class="bar">
  <div class="div1">5<span class="tooltiptext">Number of completed surveys</span></div>
  <div class="div2">2<span class="tooltiptext">Number of surveys not completed</span></div>
</div>

How can I modify my bar to match the style of the bar shown in the provided image?

htmlcss

Answer №1

Repositioning the figures involves making a slight adjustment to the HTML structure, followed by utilizing absolute positioning and a transform.

.bar {
  height: 2em;
  display: flex;
  margin: 1em;
  border: 3px solid darkgrey;
  border-radius: 1px;
  background-color: #484848;
  background-image: linear-gradient(to top, #535353, #919191);
  background-repeat: repeat-x;
}

.bar>div {
  position: relative;
}

.bar>div .value {
  position: absolute;
  display: inline-block;
  bottom: -25px;
  transform: translateX(-50%);
}

.div1 {
  height: 2em;
  flex: 0 050%;
  background-color: #65ea4e;
  background-image: linear-gradient(to top, #5abe43, #64ed4e);
  background-repeat: repeat-x;
}

.div2 {
  height: 2em;
  flex: 0 0 20%;
  background-color: red;
  background-image: linear-gradient(to top, darkred, red);
  background-repeat: repeat-x;
}
<div class="bar">
  <div class="div1">
    <span class="value">5</span>
  </div>

  <div class="div2">
    <span class="value">2</span>
  </div>
</div>

Answer №2

To create the same effect for the numbers as you did for the tooltips, simply follow the same steps. Insert a <span> around the numbers and add similar styling:

.bar {
  height: 2em;
  display: flex;
  border: 3px solid darkgrey;
  border-radius: 1px;
  background-color: #484848;
  background-image: linear-gradient(to top, #535353, #919191);
  background-repeat: repeat-x;
}

.div1 {
  height: 2em;
  width: 50%;
  background-color: #65ea4e;
  background-image: linear-gradient(to top, #5abe43, #64ed4e);
  background-repeat: repeat-x;
}

.div2 {
  height: 2em;
  width: 20%;
  background-color: red;
  background-image: linear-gradient(to top, darkred, red);
  background-repeat: repeat-x;
}

.div1:hover .tooltiptext {
  visibility: visible;
}

.div2:hover .tooltiptext {
  visibility: visible;
}

.text {
  display: inline-block;
  margin-top: 2em;
}

.tooltiptext {
  display: inline-block;
  visibility: hidden;
  background-color: #484848;
  color: white;
  padding: 3px;
  border-radius: 5px;
}
<div class="bar">
  <div class="div1"><span class="text">5</span><span class="tooltiptext">Number of completed surveys</span></div>
  <div class="div2"><span class="text">2</span><span class="tooltiptext">Number of incomplete surveys</span></div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to position a div below another sticky div when the first div's height is constantly changing

I am facing a challenge with scrollable text and sticky headers on my webpage. The top text has dynamic height based on the content below, which is followed by a sticky header with its own dynamic height. Now, I want to add another sticky header below the ...

htmlcss

Discovering the value of an HTML element node in the TinyMCE editor through the use of JavaScript or jQuery

Is there a way to retrieve the node name value using JavaScript or jQuery within the TinyMCE editor? Currently, I am only able to access the nodeName using the code snippet below: var ed = tinyMCE.activeEditor; var errorNode = ed.selection.getNode().node ...

javascriptjqueryhtmlcsstinymce-4

Tips for inserting a PHP array into an email communication

I have a question regarding sending emails through PHP. How can I include PHP arrays in the message section of an email? Here is a simple array that I created and attempted to include in the email, but it seems incorrect as I couldn't find any releva ...

phphtmlarraysemail

Formatting your HTML tags in Visual Studio

For instance, I have this particular tag with concise content <div>It is brief</div> However, upon formatting, Visual Web Developer presents it as <div> It is brief</div> which is unattractive. What I desire is <div> ...

htmlvisual-studioformatting

What could be causing the issue with my validation for alphabetical input?

I am currently working on a registration form that only accepts alphabetical input. However, I am facing an issue where my error message appears regardless of whether I input an alphabetical or special character. According to my understanding, the code sho ...

javascripthtmlvalidation

Using JavaScript to dynamically add items from a menu and include a delete button for the option to remove them

//I am embarking on an exciting AJAX lab where I will be experimenting with dynamic element creation and deletion. Below is a snippet of the code to get started. //Generate elements and text nodes along with a deletion button for each item in the cart fu ...

javascriptajaxjsonhtml

Ensure that the assistant stays beneath the cursor while moving it

I am currently working on creating a functionality similar to the 'Sortable Widget', but due to some constraints, I cannot use the premade widget. Instead, I am trying to replicate its features using draggable and droppable elements: $(".Element ...

javascriptjqueryhtmlcssjquery-ui

Dealing with 'this' while using an addEventListener

I need to trigger the function handleRangeUpdate in a way that it responds to the event calling it and decides whether to run console.log(this.value). The problem arises when I pass e into handleRangeUpdate using addEventListener, causing the value of thi ...

javascripthtmlthisaddeventlistener

CSS: Eliminate unnecessary space at the top by implementing a margin and padding reset

I am puzzled by the presence of approximately 10px of whitespace at the top of my HTML file. Despite setting margin and padding to 0 in the "body" section of my CSS, the whitespace persists. Any suggestions? Thank you! Update: I discovered that removing t ...

csshtml

Ways to align various paragraphs within a single Bootstrap row

Looking to include notes on the right side of each input field? Check out this example I put together using a bootstrap layout. <head> <meta charset="utf-8"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4 ...

htmlcsstwitter-bootstrap

I recently aligned a component within a column of the Bootstrap grid using the <center> tag

Apologies for admitting this on Stackoverflow, but I'm struggling to center an element and the center tag seems to do the trick. My CSS skills are limited, so I'm reaching out to see if there's a better way to achieve this? <div class="c ...

htmlcsstwitter-bootstrap

Locate the data attribute and store it in the database using an ajax request

I am in need of a proper script to insert a data attribute into the database upon clicking using ajax. HTML: <li><a data-cat="random name">Button</a></li> jQuery: $('li a').click(function() { $(this).data('cat&a ...

phpjqueryhtmlajax

Embedding a picture within a uniquely shaped container

I have multiple sets of skewed divs and I would like to include a separate image in each of them. However, when I attempt to insert an image, it also becomes skewed and distorted. Is there a way to prevent this from happening? Ideally, I want the images to ...

htmlcss

Issue with uppercase letters within a text input field

Imagine having an <input> and a <textarea> along with some JavaScript code that sends the value of the <input> to the <textarea> with additional text. How can you achieve this task? The text-transform: capitalize property is set in ...

javascripthtmlcss

What steps can I take to bring my text more in line with my header?

How can I adjust the spacing between my small text and big text on my website? Here is a snippet of my HTML code: <div class="header"> <br> <br> <br> <br> <h1>Summi ...

htmlcssweb

Selecting specific elements based on their position within a parent element using

I can't seem to figure out the strange behavior of the nth-child selector. After calling the function BackColor1(), my visual appears different than expected: Something seems off. However, when I call BackColor2(), everything looks normal again. Co ...

jquerycss

Overriding a CSS property with !important proves ineffective

I need to make adjustments to an old internal page that currently has the following CSS styling: table { font-family: "Arial"; font-size: 13px; text-align: left; border-collapse: collapse; border: 1px solid black; vertical-align: m ...

htmlcss

Extension for Chrome that enhances YouTube video playback experience

I'm struggling to figure out why this isn't functioning. I've reviewed the Google extension dev docs and examined some sample code. Checked various Stack Overflow questions and answers, but haven't received any helpful feedback or res ...

javascripthtmlgoogle-chrome-extension

If the option of "none" is chosen, I would like to deactivate all checkbox selections

Struggling with disabling all checkboxes in a PHP form when the NONE option is selected. <h5>HEALTH OF STUDENT</h5> <p>Any physical, emotional, or other difficulties to be aware of?</p> <table> <td>Hearing ...

javascriptphphtmljquery

When a jQuery click event is triggered, the event.target will return the child element that was clicked within the

When I have a jQuery click event assigned to a hyperlink that contains an image, each with separate ids, I expect clicking the hyperlink to trigger the code event.target.id, returning the hyperlink's id. However, it actually returns the image's i ...

javascriptjqueryhtmleventsjquery-events