Андрей812,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.helptip {
height: 35px;
background-color: hsl(328, 100%, 54%);
width: 200px;
display: block;
margin: 4px;
}
</style>
<script>
const cssText = `<style type="text/css">
.help_content {
text-align: center;
line-height: 35px;
position: relative;
}
.jclose:after{font-size: 32px;
padding: 4px;
line-height: 8px;
height: 8px;
right: 2px;
top: -16px;
position: absolute;
content: "\u0353";
color: hsl(0, 0%, 100%); }
</style>`,
htmlText = `<div class="help_content">Текст<div class="jclose"></div></div>`;
class Attention extends HTMLDivElement {
constructor(html, cls) {
super();
this.parentClass = cls;
this.attachShadow({mode: 'open'});
this.shadowRoot.innerHTML = html;
document.addEventListener("click", this.eventHandler.bind(this));
}
eventHandler({target}) {
if(target = target.closest(this.parentClass)) {
target === this.parentNode ? this.remove() : target.append(this);
}
}
}
window.customElements.define('help-element', Attention,{extends: 'div'});
new Attention(cssText + htmlText, `.helptip`);
</script>
</head>
<body>
<span class="helptip"></span>
<span class="helptip"></span>
</body>
</html>