Подскажите, пожалуйста, как сделать на js чтобы при появлении блока .help_content он был посередине .helptip-mod и не уходил за пределы окна. Представил 4 версии где может быть расположен .helptip-mod
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<style>
.helptip-mod {
cursor: pointer;
width: 35px;
position: absolute;
}
.helptip-mod.center{
position: absolute;
left: 50%;
}
.helptip-mod.right{
position: absolute;
right: 0;
}
.helptip-mod.bottom{
position: absolute;
left: 50%;
bottom: 0;
}
.helptip-mod .help_content {
position: relative;
padding: 15px;
-webkit-box-shadow: 0 0 10px 2px rgb(0 0 0 / 20%);
cursor: default;
width: 264px;
border-radius: 12px;
}
._2oUf {
position: absolute;
z-index: 2;
top: -12px;
}
._2oUf:before {
top: 0;
border-color: hsla(0,0%,100%,0) hsla(0,0%,100%,0) rgba(0,26,52,.16);
}
._2oUf:before, ._2oUf:after {
display: block;
content: "";
position: absolute;
top: 1px;
transform: translateX(-50%);
background: hsla(0,0%,100%,0);
border-color: hsla(0,0%,100%,0) hsla(0,0%,100%,0) #fff;
border-style: solid;
border-width: 0 12px 12px;
}
._2oUf:before, ._2oUf:after {
display: block;
content: "";
position: absolute;
top: 1px;
transform: translateX(-50%);
background: hsla(0,0%,100%,0);
border-color: hsla(0,0%,100%,0) hsla(0,0%,100%,0) #fff;
border-style: solid;
border-width: 0 12px 12px;
}
.close {
position: absolute;
right: 10px;
top: 5px;
width: 32px;
height: 32px;
opacity: 0.3;
cursor: pointer;
}
.close:hover {
opacity: 1;
}
.close:before,
.close:after {
position: absolute;
left: 15px;
content: ' ';
height: 33px;
width: 2px;
background-color: #333;
}
.close:before {
transform: rotate(45deg);
}
.close:after {
transform: rotate(-45deg);
}
</style>
</head>
<body>
<div class="helptip-mod left">
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="style-scope yt-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;"><g class="style-scope yt-icon"><circle cx="5" cy="12" r="2" class="style-scope yt-icon"></circle><circle cx="12" cy="12" r="2" class="style-scope yt-icon"></circle><circle cx="19" cy="12" r="2" class="style-scope yt-icon"></circle></g></svg>
</div>
<div class="helptip-mod center">
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="style-scope yt-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;"><g class="style-scope yt-icon"><circle cx="5" cy="12" r="2" class="style-scope yt-icon"></circle><circle cx="12" cy="12" r="2" class="style-scope yt-icon"></circle><circle cx="19" cy="12" r="2" class="style-scope yt-icon"></circle></g></svg>
</div>
<div class="helptip-mod right">
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="style-scope yt-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;"><g class="style-scope yt-icon"><circle cx="5" cy="12" r="2" class="style-scope yt-icon"></circle><circle cx="12" cy="12" r="2" class="style-scope yt-icon"></circle><circle cx="19" cy="12" r="2" class="style-scope yt-icon"></circle></g></svg>
</div>
<div class="helptip-mod bottom">
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="style-scope yt-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;"><g class="style-scope yt-icon"><circle cx="5" cy="12" r="2" class="style-scope yt-icon"></circle><circle cx="12" cy="12" r="2" class="style-scope yt-icon"></circle><circle cx="19" cy="12" r="2" class="style-scope yt-icon"></circle></g></svg>
</div>
<script>
document.addEventListener("click", ({ target }) => {
let content = document.querySelector(".help_content"), mod;
if (mod = target.closest(".helptip-mod")) {
if (!mod.querySelector(".help_content")) {
if (content) content.remove();
let tt = '<ul><li>номер 1</li><li>номер 2</li><li>номер 3</li><li>номер 4</li></ul>';
mod.insertAdjacentHTML("beforeEnd", '<div class="help_content">' + tt + '<div class="_2oUf"></div><div class="close"></div></div>');
}
else if (target.closest(".close") || !target.closest(".help_content")) content.remove();
} else if (content) content.remove();
});
</script>
</body>
</html>
