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 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></div></div>


</body>
</html>

JavaScript

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

function mouseOver() {

let text = element.getAttribute("com"); 
document.getElementById("demo").innerHTML = text;
}

function mouseOut() {
  document.getElementById("demo").style.color = "black";
}