JSFiddle - React, Tailwind, and code Playground

by karyoker

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 class="col-4 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 type='button' id='1' class='btn btn-warning' com='Savin Interview'   onclick='goTo(0)'>1</button></div></div>

<div id="fill"></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() { //alert("out");
  document.getElementById("demo").innerHTML="";
}