Html - Positioning relative to a specific tag

JohnV
October 18, 2023
143 views
0 votes
2 Answers

I have the below JSfiddle: https://jsfiddle.net/kartik987/u34xsk5e/3/

If I hover over, the image tag the "HOVER TEXT" should appear below the image, currently it appears below the "RANDOM TEXT COMING FROM API".
The "RANDOM TEXT COMING FROM API" could be a few words or even a few sentences.

I am trying to find a way to always position the "HOVER TEXT" it below the image tag.
What I have been trying is:

.wrapper {
  position: relative;
  background-color: #DCDCDC;
  /* background-image: linear-gradient(180deg, #fff, #e4e5f0); */
}

.tooltip {
  transform: none;
  margin: 20px;
  display: inline;
  position: relative;
}

.tooltip-scroll {
  display: inline;
}

.tooltip:hover>.tooltip-text,
.tooltip:hover>.wrapper {
  pointer-events: auto;
  opacity: 1.0;
}

.tooltip>.tooltip-text,
.tooltip>.wrapper {
  display: block;
  position: relative;
  z-index: 6000;
  max-width: 350px;
  overflow: visible;
  padding: 5px 8px;
  border: 1px solid #575757;
  margin-top: 10px;
  line-height: 16px;
  border-radius: 4px;
  text-align: left;
  color: black;
  /* background: #DCDCDC; */
  background-image: linear-gradient(180deg, #fff, #e4e5f0);
  pointer-events: none;
  opacity: 0.0;
  transition: all 0.4s ease-out;
}


/* Arrow */

.tooltip>.tooltip-text:before,
.tooltip>.wrapper:before {
  display: inline-block;
  top: -7px;
  content: "";
  position: absolute;
  border: solid;
  border-color: rgba(0, 0, 0, 1) transparent;
  border-width: 0 .5em .5em .5em;
  z-index: 6000;
  /* left: calc(var(--variable-width) + 20px);*/
  /* left: 100%-20px
        
         */
  /* left: 20px; */
}


/* Invisible area so you can hover over tooltip */

.tooltip>.tooltip-text:after,
.tooltip>.wrapper:after {
  top: -20px;
  content: " ";
  display: block;
  height: 20px;
  position: absolute;
  width: 60px;
  left: 20px;
}

.wrapper>.tooltip-text {
  overflow-y: auto;
  height: 50px;
  display: block;
}

RANDOM TEXT COMING FROM API
<span class="tooltip tooltip-scroll">
    <img style="width: 16px; height: 16px" id="di_1230575183658::::16" alt="Er" src="imag.png">
  <span class="wrapper"> 
     <span class="tooltip-text">
         HOVER TEXT
      </span>
  </span>
</span>

I don’t want to give a move the hover span by giving a left property in px. As the "RANDOM TEXT COMING FROM API" could be a few words or even a few sentences.
Is there a way to calculate the and set the left value so that it always aligns below the image?

Answers

You want to know that position: relative does not create a stacking context on inline elements. So your .tooltip should be e.g. inline-block:

.wrapper {
  position: relative;
  background-color: #DCDCDC;
  /* background-image: linear-gradient(180deg, #fff, #e4e5f0); */
}

.tooltip {
  transform: none;
  margin: 20px;
  display: inline-block;
  position: relative;
}

.tooltip-scroll {
}

.tooltip:hover>.tooltip-text,
.tooltip:hover>.wrapper {
  pointer-events: auto;
  opacity: 1.0;
}

.tooltip>.tooltip-text,
.tooltip>.wrapper {
  display: block;
  position: relative;
  z-index: 6000;
  max-width: 350px;
  overflow: visible;
  padding: 5px 8px;
  border: 1px solid #575757;
  margin-top: 10px;
  line-height: 16px;
  border-radius: 4px;
  text-align: left;
  color: black;
  /* background: #DCDCDC; */
  background-image: linear-gradient(180deg, #fff, #e4e5f0);
  pointer-events: none;
  opacity: 0.0;
  transition: all 0.4s ease-out;
}


/* Arrow */

.tooltip>.tooltip-text:before,
.tooltip>.wrapper:before {
  display: inline-block;
  top: -7px;
  content: "";
  position: absolute;
  border: solid;
  border-color: rgba(0, 0, 0, 1) transparent;
  border-width: 0 .5em .5em .5em;
  z-index: 6000;
  /* left: calc(var(--variable-width) + 20px);*/
  /* left: 100%-20px
        
         */
  /* left: 20px; */
}

.tooltip>.wrapper {position:absolute}
/* Invisible area so you can hover over tooltip */

.tooltip>.tooltip-text:after,
.tooltip>.wrapper:after {
  top: -20px;
  content: " ";
  display: block;
  height: 20px;
  position: absolute;
  width: 60px;
  left: 20px;
}

.wrapper>.tooltip-text {
  overflow-y: auto;
  height: 50px;
  display: block;
}

RANDOM TEXT COMING FROM API
<span class="tooltip tooltip-scroll">
    <img style="width: 16px; height: 16px" id="di_1230575183658::::16" alt="Er" src="imag.png">
  <span class="wrapper"> 
     <span class="tooltip-text">
         HOVER TEXT
      </span>
  </span>
</span>

.tooltip>.tooltip-text, removed these as invalid selector
Left comment on CSS that was not needed.

Most of this is fairly self explained by the CSS perhaps. the key is the various transform such as transform: translate(-1em, 7em);

I did add a wrapper to make positioning easier relative due to that
use em as my brain works better with that so 1em == 16px etc.
note how the "arrow" centers under the image and the alt text kind of messes with the size as it is wider than the 1X1 em/16px

body {
  font-size: 16px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: 1px solid #ff00ff;
}

.tooltip-container {
  /* this becomes the hover area */
  display: inline-block;
  width: 2em;
  height: 2em;
  margin-top: -6em;
  padding: 1.5em;
  border: solid 1px #FF0000;
  transform: translate(-1em, 7em);
}

.tooltip {
   border: solid 1px #00FF00;
}

.wrapper {
  transform: translate(-1em, -0.25em);
}

/* span has this already
.tooltip-scroll {
  display: inline;
}
*/

.tooltip>.wrapper {
  display: block;
  z-index: 6000;
  max-width: 21.875em;
  min-width: 10em;
  overflow: visible;
  padding: 0.25em 0.5em;
  border: 1px solid #575757;
  margin-top: 0.625em;
  line-height: 1em;
  border-radius: 0.25em;
  color: black;
  background-image: linear-gradient(180deg, #fff, #e4e5f0);
  pointer-events: none;
  opacity: 0.0;
  transition: all 0.4s ease-out;
}

.tooltip-container:hover>.tooltip>.wrapper {
  pointer-events: auto;
  opacity: 1.0;
}

.tooltip>.wrapper:before {
  /* Arrow */
  display: block;
  transform: translate(0.5em, -0.75em);
  content: "";
  width: 0;
  border: solid;
  border-color: rgba(0, 0, 0, 1) transparent;
  border-width: 0 .5em .5em .5em;
  z-index: 6000;
}

RANDOM TEXT COMING FROM API
<span class="tooltip-container">
  <span class="tooltip tooltip-scroll">
      <img id="di_1230575183658::::16" alt="Er" src="imag.png" />
    <span class="wrapper"><span class="tooltip-text">HOVER TEXT this is better bigger perhaps for our test and even better with more </span></span>
</span>
</span>/*.tooltip>.tooltip-text,  invalid selector */

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Positioning relative to a specific tag

Answers