How to align a tooltip in the center horizontally below its parent element without specifying a fixed width

Is it possible to center a tooltip horizontally under its parent without setting a static width on the tooltip? I am facing this issue because the length of the text in the tooltip varies. Below is the code snippet for reference. Even though adjusting the absolute positioning can make it perfectly centered, the varying text length causes alignment issues.

body {
margin: 20px;
}

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: 150%;
    left: 50%;
    margin-left: -60px;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}
<div class="tooltip">Hover over me
  <span class="tooltiptext">Notifications</span>
</div>

<br/><br/><br/><br/>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Account</span>
</div>

<br/><br/><br/><br/>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Help</span>
</div>

htmlcss

Answer №1

The simplest solution would be to use the translate() function instead of a negative margin. This should work fine unless the tooltip is longer than the text itself, in which case it might go off the screen.

body {
  margin: 20px;
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}


/* Centering style for tooltip */

.tooltip, .tooltiptext {
  background-image: linear-gradient(to left, transparent 50%, gray 50%);
}

.tooltip .tooltiptext {
  visibility: hidden;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 150%;
  left: 50%;
  transform: translate(-50%, 0)
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
<div class="tooltip">Hover over me
  <span class="tooltiptext">Notifications</span>
</div>

<br/><br/><br/><br/>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Account</span>
</div>

<br/><br/><br/><br/>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Help</span>
</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

Access a webpage whose URL has been dynamically assigned using JavaScript

I have a website that consists of a single page and features four tabs. Whenever a tab is clicked, it displays the corresponding content in a div while hiding the other three divs along with their respective content. To ensure a smooth user experience, I u ...

javascripthtmlurl

Unable to view sidebar navigation on the screen

I've been experimenting with the sidebar navigation from w3 schools, specifically trying to create a side-nav that opens from one div. You can see an example here: http://www.w3schools.com/w3css/tryit.aspfilename=tryw3css_sidenav_left_right&stack ...

javascriptjqueryhtmlcssw3.css

Once the div content is reloaded using AJAX, the refreshed HTML suddenly vanishes

My JS code reloads the div every 2 seconds: var auto_refresh = setInterval(function() { $('#indexRefresh').load('/includes/index_refresh_include.php?_=' + Math.random()); }, 2000); After that, I have an AJAX request that loads mor ...

javascriptjqueryhtmlajax

Dynamic classroom experience featuring a bootstrap sidebar

I am having an issue with changing the active class of the sidebar after a click event. I have tried using Bootstrap and implemented some JavaScript code, but it doesn't seem to be working properly. $(function(){ $('.sidebar1 a').filt ...

javascripthtmlbootstrap-4

Manipulating DropDownList Attributes in ASP.NET using JavaScript

I am facing an issue with populating a Dropdownlist control on my ASCX page. <asp:DropDownList ID="demoddl" runat="server" onchange="apply(this.options[this.selectedIndex].value,event)" onclick="borderColorChange(this.id, 'Click')" onblur="bo ...

javascripthtmlasp.netajax

Activate vertical scrolling in JavaScript when an image is clicked

I currently have a collection of button images with different hover effects specified like this: <img src="home.PNG" onmouseover="this.src='homemo.PNG'" onmouseout="this.src='home.PNG'" /> My goal is to make them scroll down to ...

javascriptjqueryhtmlcss

Is it possible to achieve this shaded gradient effect using CSS3?

Check out this image for reference. I've managed to style a horizontal rule using SVG as the background image, creating a specific effect. However, I am struggling to achieve the same result using CSS3 alone. If there are any CSS experts who can adv ...

htmlcss

Dropzone JavaScript returns an 'undefined' error when attempting to add an 'error event'

When using Dropzone, there is a limit of 2 files that can be uploaded at once (maxFiles: 2). If the user attempts to drag and drop a third file into the Dropzone area, an error will be triggered. myDropzone.on("maxfilesexceeded", function(file){ a ...

javascriptphphtmldropzone.js

Incorporate dynamic 3D elements into your website for an engaging

I've been tasked with creating a website for a residential building project. The client requested an interactive 3D view be embedded into the site, where all available flats are colored differently from those that have already been booked. Hovering ov ...

htmlcanvasweb3dwebgl

Unable to load new page using Selenium and Chromedriver

Currently, I am in the process of learning how to utilize Selenium with Python. As a beginner exercise, I have been attempting to click a button on a webpage. Although I have been able to successfully locate the button and click on it, an unusual issue ari ...

javascriptpythonhtmlselenium-webdriver

Types of Content in Solr Responses

My journey with Solr has been enlightening, but I've hit a bump in the road. When querying Solr using: curl "http://localhost:8983/solr/myCollection/select?q=*:*&wt=json&rows=0" I receive a webpage displaying the JSON response. However, the ...

htmljsonsolr

What is the best way to deactivate a submit button while an AJAX request is underway, and then reactivate it once a successful AJAX response is

I am working with the following HTML code: <form action="view_rebate_master.php" method="post"> <div class="form-group"> <label for="company_name" class="col-lg-12">Manufacturer</label> <div class="col-lg-12"> ...

javascriptjqueryhtmlajaxajax-request

Automatically assign the "Restricted" cursor to disabled fields within a dynamic form

Is there a method in Angular 6/7 that allows the cursor to change to "Not Allowed" when hovering over a disabled field in a reactive form? I prefer not to use CSS for this cursor change. Is there a way to achieve this through Angular alone? Currently, th ...

angularcsstypescriptangular-reactive-formsangular-forms

"Utilize CSS for animating list items within a ul

Having an unordered list, I would like to iterate through each list item one by one. My current solution is somewhat functional, but upon close inspection, you can observe that when it reaches "item 4," it starts overlapping with "item 1" and becomes incon ...

cssanimation

Arranging multiple lines of text above several images using CSS

I'm encountering issues when trying to place multiple texts in front of multiple images. I've managed to achieve this using absolute and relative positioning, with one text above one image. However, the problem arises when I try to apply this to ...

css

Script tags in PHP-Diff are ignored

I am currently utilizing the PHP library at https://github.com/rashid2538/php-htmldiff to compare two HTML pages. However, I am facing an issue where the content inside <script></script> tags is also being compared, which disrupts the functiona ...

javascriptphphtml

How to position a "figure" element at the center using CSS creatively (without relying on Div elements)

Struggling with my first website creation, I encountered a challenge in centering three inline-block images using CSS. Despite successfully using the figure tag to title and display the images, I couldn't get them to align horizontally from the cente ...

csshtml

Is there a way to create a full-screen canvas in Chrome?

Looking to create a full-screen canvas in Google Chrome? <style> #canvas:-webkit-full-screen { height:100%; width: 100%; } </style> <button onclick="fullScreen()">Full Screen</button> <canvas id="canvas"></canv ...

csshtmlgoogle-chromecanvas

React Autocomplete Input Not Functioning as Expected

I've been working on a form that needs autocompletion for emails, allowing users to select from browser suggestions. In HTML, I would typically use autocomplete='on' in the inputs or forms and it worked perfectly. However, when trying to imp ...

htmlreactjsformstailwind-css

Tips for Preventing Page Scrolling When Clicking on a Hashed A Tag in Content with a Fixed

Currently stuck dealing with a challenging problem related to hashed anchor links. Here's a basic representation of the HTML code: <div class="main-wrap"> <header></header> <aside> <nav> <ul> ...

htmlcsscss-positionanchorfragment-identifier