Андрей812,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.help_content {
position: relative;
background: green;
color: #fff;
}
.close {
position: absolute;
right: 22px;
top: 2px;
width: 12px;
height: 32px;
opacity: 0.3;
}
.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>
<script>
</script>
</head>
<body>
<div class="helptip-mod">БЛОК</div>
<br />
<div class="helptip-mod">БЛОК2</div>
<br />
<div class="helptip-mod">БЛОК3</div>
<br />
<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="close"></div></div>');
}
else if (target.closest(".close") || !target.closest(".help_content")) content.remove();
} else if (content) content.remove();
});
</script>
</body>
</html>