JSFiddle - React, Tailwind, and code Playground

by Guruprasad Rao

HTML

<div id="element"></div>

CSS

.tooltip{
display: inline;
position: relative;
}
.tooltip:hover:after{
background: hotpink;
background: #8B8386;
border-radius: 5px;
top:21px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
font-family:calibri;
font-weight:700
}

JavaScript

var title = document.createElementNS('http://www.w3.org/2000/svg', 'title');
 //title.textContent = data[i].title;//JSON object That works
title.textContent="Hi";
title.classList.add("tooltip");

console.log(title);
document.getElementById("element").appendChild(title);