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?
2
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
:.tooltip>.tooltip-text,
removed these as invalid selectorMost of this is fairly self explained by the CSS perhaps. the key is the various
transform
such astransform: translate(-1em, 7em);
em
as my brain works better with that so1em
==16px
etc.