What is the best way to ensure a bottom tooltip stays perfectly aligned with the right edge of its corresponding element?

Currently, I am trying to implement a tooltip above my progress bar. However, the small tooltip that I have is not functioning correctly...

This is how it currently appears:

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

I need the tooltip to display above the white dot.

Here is the HTML and CSS code that I am using:

HTML:

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

CSS:

.progress {
    height: 8px;
    border-radius: 9.5px;
    .progress-bar {
        background-color: #ec4124;
        border-radius: 5px;
    }
    // The white dot at the end of the progress bar
    &::after {
        content: "";
        width: 6px;
        height: 6px;
        position: relative;
        border-radius: 100%;
        right: 8px;
        top: 1px;
        background-color: $white;
    }
}

.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;
}

A live demo can be found at the provided link.

javascripthtmlcsstwitter-bootstrapbootstrap-4

Answer №1

To position the tooltip at the right end of the element instead of centering it, you must set the offset based on the width of the bar manually:

let offset = $('.progress-bar').width();

$('.popOver').tooltip({
    trigger: 'manual',
    offset: offset
}).tooltip('show');

You will need to repeat this process every time the progress bar is updated, so if it's dynamic, update it in a callback within the function that updates the bar.

Answer №2

To modify the data-placement setting, switch from "top" to "right".

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

Methods for Addressing Absent SocketIO Session Data Within an Express Route Handler

My goal is to establish communication between Express and SocketIO on a nodejs server, allowing them to share session data. After conducting thorough research online, I discovered a potential solution at https://socket.io/docs/v3/faq/#Usage-with-express-se ...

javascriptnode.jsexpresssessionsocket.io

A pair of buttons each displaying a unique div block

I am facing an issue with my jQuery script. I want to be able to click on one of the previewed text associated with a button and then have the other one close automatically. The desired effect is for the text to slide down using slideDown() and disappear ...

javascriptjqueryhtmlcssshow-hide

How can I trigger the offcanvas opening in Bootstrap 5 through code?

I am having an issue with a bottom offcanvas on my webpage. I want to open it when a card is clicked, but despite trying to set the necessary attributes and using code from the documentation, it only shows the backdrop briefly before immediately dismissing ...

javascriptbootstrap-5

The webpage Page.php is failing to display the newly added content

I have a collection of logos on my homepage (index.php) in WordPress, and they are positioned at the bottom just as I intended. However, these logos do not appear on all pages. Even if I add the exact same code to the page.php file in the exact position, ...

phphtmlwordpress

Observable Knockout Dependency

I found an interesting example on the KnockoutJS site () and I want to implement something similar. My goal is to check if certain values are available on the client side when a category is selected. If they are not, then I need to fetch them from the ser ...

javascriptajaxknockout.js

Transform the Curly Braces within a string into an HTML span Element using JSX

Looking to parameterize a string like 'Hello {name}, how are you?' in React Component? Want to replace curly braces with variable text and highlight it using span/strong tag. Here's an example of the desired final result: Hello <span cla ...

javascriptstringreactjsjsx

Having trouble getting the Bootstrap toggle checkbox to function properly within Angular 2 components?

Working on an Angular 2 project with Bootstrap, I recently tried to integrate a bootstrap-toggle checkbox into the UI. Despite following the instructions from this site, the checkbox was displayed as a normal checkbox instead of toggled. The Index.html cod ...

jqueryhtmltwitter-bootstrapangular

Utilize tag helpers to choose an option within a select element

I am facing a challenge in my ASP.NET Core application where I need to create a specific HTML structure in a Razor view based on a model instance. The HTML code I need to generate is a dropdown list with multiple options, each having custom attributes like ...

c#htmlasp.net-corerazortag-helpers

Tips for arranging divs in the exact way you want

Can you assist me in creating a layout like the one shown in the image below? I have attempted to achieve it, but my understanding of CSS is lacking and the layout needs to be completed quickly... I experimented with CSS properties such as float, overflow ...

csshtml

The functionality of Styles in Material UI seems to be malfunctioning

I'm currently learning how to use Material UI for React, specifically focusing on makeStyles. Below is the JavaScript code I have: import React from "react"; import MenuIcon from "@material-ui/icons/Menu"; import EventNoteIcon fr ...

javascriptreactjsmaterial-ui

What prompts certain individuals to convert their asp.net pages into HTML pages before publishing?

Recently, I was informed that there is a possibility of working on a project involving ASP.NET 3.5 and C#. A colleague suggested that when we publish the site, we should convert all pages to HTML. This means instead of www.test.com/Page.aspx, it would be w ...

c#asp.nethtmlsecurity

HTML, JavaScript, and PHP elements combine to create interactive radio buttons that trigger the appearance and disappearance of mod

On my page, I have multiple foreach loops generating divs with different information. These divs are displayed in modals using Bootstrap. However, I am encountering an issue where if I select a radio button and then close the modal and open another one, th ...

javascriptphpjqueryhtml

Switch up the font style of the title element

Is it possible to modify the font-family of the title attribute in an input field using either JavaScript or jQuery? <input type="text" title="Enter Your Name" id="txtName" /> ...

javascriptjqueryhtmlcss

What is the best way to extract the essential data from the returned value without any unnecessary additions?

Looking for a way to extract specific data from an api response in the format of x[[seconds:cost[[x? I am using php and javascript. How can I separate out the seconds and cost values only? For example, if the response looks like this: x[[16413:2.60[[x I ...

javascriptphpjqueryajax

Tips for incorporating automatic line breaks and setting a maximum column width in a table

Is there a way to set different maximum widths for table columns and enable automatic line breaks when entering text into the columns? Below is the code snippet I currently have: echo "<table border='1' cellpadding='10'>"; echo ...

phphtmlhtml-tablewidth

Using AJAX to store values from PHP SESSION into form inputs with POST data

Wondering how to store ajax-sent data from form inputs as session variables? I have already included session_start() in header.php. Saving the code in the database is working fine. Here's what I attempted: HTML form <form action='' meth ...

phphtmlajaxwordpresssession

Steps for integrating Bootstrap into a Node.js project

I've completed the installation of Bootstrap using npm by running the command: npm install bootstrap However, even though it's now located in the node_modules directory, I'm having trouble linking it with my .html files. I understand that ...

node.jstwitter-bootstrapnpm

Verify if the text field is currently blank or has content before applying attributes

How can I disable one text box if another specific text box is filled within a div containing multiple text boxes? For example: When I enter text in textbox(4), I want to automatically disable textbox(1). And if I remove the text from textbox(4), I want t ...

javascriptjquery

Exploring the map function in Angular and native JavaScript

Still getting the hang of angular, so there might be something I'm overlooking. I have a model containing a collection of objects with their own properties, and my goal is to generate a csv value based on the Text property of each object. I've ex ...

javascriptangularjs

What is the best way to develop an expanding line animation from this starting point?

I have a vision for an animation where, upon hovering over an icon, it enlarges, increases in opacity, and reveals some accompanying text. The visual effect I am aiming for involves two lines of color expanding horizontally from the center outwards before ...

htmlcssanimationcss-animations