JSFiddle - React, Tailwind, and code Playground

by irantwomiles

HTML

<html>
  <body>
    <div id="root">
      Hover for tooltip
    </div>

  </body>
</html>

JavaScript

const root = document.querySelector('#root');

function createTooltip() {
	const element = document.createElement('div');
  element.id = "tooltip-creation";
  element.classList.add("tooltip");

  const childElement = document.createElement("div");
  childElement.id = "data";
  
  element.appendChild(childElement);
  element.insertAdjacentHTML('afterbegin','<table border="1"><tr><td><strong>OMG</strong></td></tr></table>');

root.appendChild(element);

}

function deleteTooltip() {
 const element = document.querySelector('#tooltip-creation');
 element.remove();
}

root.addEventListener('mouseover', () => {

	console.log("Mouse over");
	createTooltip();
})

root.addEventListener('mouseout', () => {

	console.log("Mouse out");
	deleteTooltip();
})