JSFiddle - React, Tailwind, and code Playground

by kicken

HTML

<!DOCTYPE html>
<html>
<body>
<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
 


<h2>The onmouseover Event</h2>

<div id="fill"></div>
 <div class="col-4 bg-dark text-white EP" id ="tr">
 <div id="butts">
    <skip type='button' class='btn btn-warning' id="0" com='Back to start of video'  onclick='skip(-5000)'>
      0:0:0
    </skip>
    <button com="Stop the video">
      Stop
    </button>
    <button com="Next video">
      Next
    </button>
 </div>
</div>

<div id="demo"></div>
</body>
</html>

JavaScript

const element = document.getElementById("butts");
element.addEventListener("mouseover", mouseOver);
element.addEventListener("mouseout", mouseOut);

function mouseOver(e) {
	if (e.target.hasAttribute('com')){
		let text = e.target.getAttribute("com"); 
		document.getElementById("demo").textContent = text;
  }
}

function mouseOut(e) {
  document.getElementById("demo").textContent = "";
}