JSFiddle - React, Tailwind, and code Playground

by Kondal Durgam

HTML

<span id="someelem">Hover me for 2 seconds!</span>

CSS

#someelem
    {
      cursor: pointer;
    }

.tooltip
    {
    display: block;
    width: 80px;
    height:80px;
    position: absolute;
    background-color: rgb(130, 150, 200);
    padding: 5px;
    }

JavaScript

var tooltipTimeout;

$("#someelem").hover(function()  {
tooltipTimeout = setTimeout(showTooltip);}, 
                    hideTooltip);

function showTooltip()
    {
    var tooltip = $("<div id='tooltip' class='tooltip'>I'm the tooltip!</div>");
    tooltip.appendTo($("#someelem"));
    }

function hideTooltip()
    {
    clearTimeout(tooltipTimeout);
    $("#tooltip").fadeOut().remove();
    }