Adding a 'dot' to the progress bar in Bootstrap enhances its visual appeal

I am currently working on a progress bar and I would like it to look similar to this:

https://i.sstatic.net/TSDEy.png

However, my current output looks like this:

https://i.sstatic.net/rQhYc.png

I'm puzzled as to why the tooltip is floating there, and not positioned above the current value...

This is the HTML code I have:

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="48.5" aria-valuemin="0" aria-valuemax="100" style="width:48.5%">
        <span class="popOver" data-toggle="tooltip" data-placement="top" title="472 km"> </span>
    </div>
</div>

And here is the CSS:

.progress {
    height: 8px;
    border-radius: 9.5px;
    .progress-bar {
        background-color: #ec4124;
        border-radius: 5px;

        &[aria-valuenow]::after {
            content: "";
            width: 6px;
            height: 6px;
            position: absolute;
            border-radius: 100%;
            right: 7px;
            background-color: $white;
        }
    }
}

.tooltip{
    position: relative;
    float: right;
}

.tooltip > .tooltip-inner {
    background-color: $white;
    padding: 11px 16px;
    color: $red;
    font-family: Config, sans-serif;
    font-size: 18px;
    font-weight: 800;
    font-stretch: condensed;
    font-style: italic;
    line-height: 1.33;
    letter-spacing: normal;
    text-align: center;
    opacity: 1;
}

.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^=top] .arrow::before {
    top: 0;
    border-width: 0.4rem 0.4rem 0;
    border-top-color: #fff;
}

Can anyone suggest how I can position the tooltip correctly and have a "white dot" at the current value?

EDIT

The dot is no longer an issue, I am now left with the tooltip issue.

htmlcssbootstrap-4

Answer №1

To achieve the desired effect with the progress-bar, simply set its position property to relative...

.progress {
    height: 8px;
    border-radius: 9.5px;
    .progress-bar {
        background-color: #ec4124;
        border-radius: 5px;
        position: relative;

        &[aria-valuenow]::after {
            content: "";
            width: 6px;
            height: 6px;
            position: absolute;
            border-radius: 100%;
            right: 7px;
            background-color: $white;
        }
    }
}

Check out the demo here:

Answer №2

Take a look at my demo on the full page! I hope it provides some useful information for you.

$('[data-toggle="tooltip"]').tooltip();
.row {
  padding: 4em 3em;
}

.textbox {
  height: 700px;
}

.progress {
  margin-bottom: 10px;
  border-radius: 20px;
}

.progress-bar {
  width: 0;
  border-radius: 20px;
  position:relative;
}
.progress-bar span[data-toggle="tooltip"]{
  width: 16px;
  height: 16px;
  border-radius: 20px;
  background: red;
  position:absolute;
  right:0px;
  top:0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-md-6">
    <h3 class="bars">Scrollbars</h3>
    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width:25%;"><span data-toggle="tooltip" data-placement="top" title="Hooray!"></span>      </div>
      
    </div>
  </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

The UI-SELECT feature in angular-js does not seem to be displaying

I've added the necessary ui-select js and css files to my page : <link href="assets/plugins/ui-select/select.min.css" rel="stylesheet" type="text/css" <script src="assets/plugins/ui-select/select.min.js" tyle="text/javascript" </script> ...

javascriptangularjshtmlui-select

The inner DIV cannot be accessed using document.getElementById due to its limited scope

Here is the HTML code below: <Div id="one"> <Div id="two"> </Div> </Div> When trying to access div "two" using "document.getElementById("two")", it returns null. ...

htmlaccessibility

ways to add spacing between bootstrap columns

I am currently using Bootstrap 5 and I'm trying to create a row with 6 columns. I have added gutter in the row but for some reason, the spacing between the columns is not being applied. Can anyone help me figure out what I'm doing wrong here? Bel ...

htmlcssbootstrap-5

The beauty of Aurelia's scoped CSS

Embarking on my Aurelia journey, I find myself navigating through the vast world of web development with tools like nodejs, gulp, and more. The Aurelia CLI has made it convenient for me to set up a visually appealing Aurelia project in Visual Studio Code ...

cssgulpaurelia

Creating an HTML element using jQuery isn't just about designing; it

When creating HTML elements using an Ajax call from the server-side, it can be challenging to align them properly on a responsive web page. Below is an example of how elements are generated with an Ajax call: var html = ""; $.ajax({ type: " ...

htmljquerycsstwitter-bootstrap

Exploring deep nested components and elements in Angular for a targeted specific functionality

Is it possible to apply the ng deep css class to only one specific checkbox in my component, rather than all checkboxes? I want to customize just one checkbox and leave the others unchanged. How can this be achieved? Thank you. I need the CSS modificatio ...

cssangulartypescript

What is the best way to implement a seamless left-to-right sliding effect for my side navigation using CSS and Javascript?

I am currently working on creating a CSS and JavaScript side navigation. Below is the code that I have implemented so far: var nav = document.getElementById('nav'); function show(){ nav.style.display = "block"; } .side-nav{ background-color:bl ...

javascripthtmlcss

Problem with Bootstrap 3 navbar on mobile devices - not tappable or responsive

After years of using Bootstrap, I've come across a new issue with my implementation of a Bootstrap 3 Nav. While testing on a desktop browser with device emulation, the nav collapses and functions properly. However, when tapping on the header on an ac ...

javascriptjqueryhtmlcsstwitter-bootstrap

Using jQuery to access the ID of a div and create a custom close button

I am trying to implement a close button for my popup DIVs. Each one has a unique ID and I want to hide them by setting the CSS 'display' property to 'none' when closed. However, the following example is not functioning as expected. I a ...

javascriptjqueryhtmlcssbutton

Difficulty adapting CSS using JavaScript

I am looking to adjust the padding of my header to give it a sleeker appearance on the page. I attempted to achieve this with the code below, but it seems to have no effect: function openPage() { var i, el = document.getElementById('headbar' ...

javascripthtmlcssdom

Replace the default focus state using CSS or resetting it to a custom style

I'm looking for a solution similar to a CSS reset, but specifically for the :focus state. If such a thing doesn't exist yet, I'm interested in learning about the possible properties that can be reset or overridden in order to create a new :f ...

javascripthtmlcssfocus

Creating a Modal Dialog with Justified Tab and Dropdown Using Bootstrap 4.1

I am struggling with Bootstrap 4.1 as I try to align content to the right side. Specifically, I have a Navigation Bar that triggers a Modal Dialog containing Tabs. The dropdown menu on the far right of the Tab is what I want to justify to the right. Here a ...

javascriptjqueryhtmlcssbootstrap-4

An issue with type conversion arises in Visual Basic when trying to access data from an HTML

I'm currently working with an HTML table that allows for dynamically adding and deleting rows with text-input's in the cells using JavaScript. Instead of ASP.NET TextBox controls, I am sticking to traditional HTML because I believe rows containin ...

htmlasp.netvb.net

Is there a way to extract the content within the HTML tags as well as the text enclosed within parentheses?

When working with my HTML content, I came across the following line: <span>(48 עמודים סה"כ )</span> I am seeking a way to extract only the text "48 עמודים סה"כ" and store the number 48 into an integer variable. Although in t ...

c#html.net

Tips for designing a tilted CSS layout from scratch

I am looking to design a stylish interface using HTML & CSS. Here is the style I want to achieve: Currently, my interface looks like this: Although these are just reference images, you can see that my design does not have the same sleekness as the one in ...

cssskew

The alignment of the image background is malfunctioning on the iPad 3 device

Hey there, I need some assistance resolving an issue with a header background image on iPad3. The problem is that the image is not displaying correctly on iPad3 browsers, even though it works fine on desktop browsers. Below you can find my CSS and HTML cod ...

htmlcssbackground

Safari displays text in a noticeably bigger font size compared to other browsers

I'm currently working on a website and have noticed that the fonts appear larger on Mac's Safari compared to other browsers. We are using the 'Open Sans' font from Google Fonts for our website. For example, here is a CSS snippet for ti ...

htmlcsssafari

Outlook for Windows automatically sets the default font for HTML emails to Times New Roman

My email design looks great in Mac Outlook, but Windows Outlook is changing the font to Times New Roman. Below is the code for the email template. Can someone help me figure out what I'm missing? <style style="-ms-text-size-adjust: 100%;&q ...

htmlcssoutlooknewsletteroutlook-2016

Troubleshooting: SVG Icon Fails to Appear in Bright Theme Due to CSS

My HTML is structured like this. <h2 class="mt-10 scroll-m-20 border-b pb-1 text-3xl font-semibold tracking-tight first:mt-0" id="know-your-life"> <a aria-hidden="true" tabindex="-1" href="#know-your- ...

csstailwind-cssshadcnui

The input data from the MySQL database requires two page refreshes in order to be retrieved

Every time I input new values into the form fields and submit them, the page needs to be reloaded twice to display the updated values. For example, consider the $balance_2 in the 7th line. This line calculates the sum of all row values and updates the Bal ...

javascriptphpjqueryhtmlmysql