Question 43237 in Html Question posted in
Some basic documentation can be found here.

How to position an element so that it is centered under its previous sibling – Html

I want to center a speech bubble-esque tooltip element under a link. Here is my current code to do so:

.tooltip-container {
  position: relative;
  display: inline-block;
}

.tooltip {
  position: absolute;
  z-index: 1;
  background-color: #555;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 0.5em;
}

.tooltip:before {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background-color: #555;
  z-index: -1;
}
Up ahead is a

<a href="#">
  Button text
</a>

<div class="tooltip-container">
  <div class="tooltip">
    Tooltip explanation of button
  </div>
</div>

It looks like this

enter image description here

But I would like it to look like this

enter image description here

The only reason I made the .tooltip-container div is to have a positioned ancestor for .tooltip so that .tooltip can be position: absolute, but despite having that "anchor" in the page I can’t figure out a way to center the second child inside of the first one. My ideal HTML would only be:

<a href="#">
  Button text
</a>

<div class="tooltip">
  Tooltip explanation of button
</div>

and I only want to apply styling rules to these two elements, not their parent. How can I achieve this?

Tags:

2

Answers


  1. 0

    Just move a to .tooltip-container

    .tooltip-container {
  position: relative;
  display: inline-block;
}

.tooltip {
  position: absolute;
  z-index: 1;
  background-color: #555;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 0.5em;
}

.tooltip:before {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background-color: #555;
  z-index: -1;
}
    Up ahead is a



<div class="tooltip-container">
  <a href="#">
    Button text
  </a>
  <div class="tooltip">
    Tooltip explanation of button
  </div>
</div>
    Login or Signup to reply.
  2. 0

    In a far future you can use the new anchor positioning : https://drafts.csswg.org/css-anchor-position-1/#anchoring

    No browser support for this actually but I leave the answer for the future

    .tooltip {
  position: absolute;
  bottom: anchor(--my-anchor 100%);
  left: anchor(--my-anchor 50%);
  transform: translate(-50%,120%);
  z-index: 1;
  border: 6px solid #0000;
  background: 
    linear-gradient(#555 0 0) padding-box,
    conic-gradient(from 135deg at top,#555 90deg,#0000 0) top/100% 50% no-repeat border-box;
  color: #fff;
  padding: 4px 8px;
  border-radius: 12px;
  white-space: nowrap;
  margin-top: 0.5em;
}

#my-anchor {
  anchor-name: --my-anchor;
}
    Up ahead is a
<a href="#" id="my-anchor">
  Button text
</a>

<div class="tooltip" anchor="my-anchor">
   Tooltip explanation of button
</div>

    Until then, you can put the tooltip inside the link

    .tooltip {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%);
  z-index: 1;
  border: 6px solid #0000;
  background: 
    linear-gradient(#555 0 0) padding-box,
    conic-gradient(from 135deg at top,#555 90deg,#0000 0) top/100% 50% no-repeat border-box;
  color: #fff;
  padding: 4px 8px;
  border-radius: 12px;
  white-space: nowrap;
  margin-top: 0.5em;
}

a {
 position: relative;
}
    Up ahead is a
<a href="#">
  Button text
<div class="tooltip">
   Tooltip explanation of button
</div>
</a>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search