有这样的设计。它现在在项目中并且一切正常，但我想我想更改布局并相应地使工具提示中的图像位于文本的左侧。我已经挣扎了三天了，但没有任何效果。请帮帮我！
function getCoords(elem) {
let box = elem.getBoundingClientRect();
return {
top: box.top + window.pageYOffset,
right: box.right + window.pageXOffset,
bottom: box.bottom + window.pageYOffset,
left: box.left + window.pageXOffset
};
}
let textAndTooltip = document.getElementsByClassName('textAndTooltip');
let tooltip = document.getElementsByClassName('tooltip');
let tooltipPositionOk = [];
for (let i = 0; i < textAndTooltip.length; i++) {
tooltipPositionOk[i] = false;
textAndTooltip[i].addEventListener('mouseover', function() {
newPositionTooltip(i);
});
}
function newPositionTooltip(i) {
if (!tooltipPositionOk[i]) {
tooltipPositionOk[i] = true;
} else {
return;
}
tooltip[i].classList.remove('tooltip_left', 'tooltip_right');
console.log(tooltip[i]);
if (getCoords(tooltip[i]).left < 0) {
tooltip[i].classList.add('tooltip_left');
} else if (getCoords(tooltip[i]).right > document.documentElement.clientWidth) {
tooltip[i].classList.add('tooltip_right');
}
}
window.addEventListener('resize', function() {
for (let i = 0; i < textAndTooltip.length; i++) {
tooltipPositionOk[i] = false;
}
});.textAndTooltip {
position: relative;
}
.textAndTooltip__tooltip {
display: none;
}
.textAndTooltip__text {
cursor: pointer;
white-space: nowrap;
}
.textAndTooltip__text:hover+.textAndTooltip__tooltip {
display: block;
animation: UpToDown .6s ease;
animation-fill-mode: forwards;
}
.textAndTooltip__tooltip:hover {
display: block;
animation: UpToDown .6s ease;
animation-fill-mode: forwards;
}
@keyframes UpToDown {
0% {
opacity: 0;
top: 0;
}
100% {
opacity: 1;
top: 1em;
}
}
.tooltip {
position: absolute;
top: 1em;
left: 50%;
transform: translate(-50%, 0);
max-width: 300px;
min-width: 200px;
background-color: #3989c9;
padding: .5em;
aling-content: left;
text-align: center;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
color: white;
z-index: 2;
}
.tooltip_right {
left: auto;
right: 0;
transform: translate(0, 0);
}
.tooltip_left {
left: 0;
right: auto;
transform: translate(0, 0);
}<!DOCTYPE html>
<html>
<head>
<title>Online HTML Editor</title>
</head>
<body>
<p>
<span class="textAndTooltip">
<strong class="textAndTooltip__text">
Point ME!.
</strong>
<span class="textAndTooltip__tooltip tooltip">
<span><a style='align-content:left; text-align:left;'class="tooltip__img" href="https://clck.ru/J36a7" target="_blank">
<img src="https://inlnk.ru/1PnAYw" alt="babababa" width="100%">
</a></span>
<span class="tooltip__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque rem tempora cum impedit commodi. Voluptas accusantium recusandae dolores, officia quasi.</span></span>
</span>
</body>
</html>
