JSFiddle - React, Tailwind, and code Playground

by lindychen

HTML

<div id="tooltip"></div>
<button id="toggle">toggle hover</button>

CSS

#tooltip {
    width: 200px;
    height: 200px;
    background: blue;
}
#tooltip:hover,
#tooltip.hover {
    background: red;
}

JavaScript

var tooltip = document.getElementById('tooltip');
var toggle = document.getElementById('toggle');
var isHover = false;

toggle.onclick = function() {
    if (!isHover) {
        tooltip.classList.add('hover');
    } else {
        tooltip.classList.remove('hover');
    }
    isHover = !isHover;
};