JSFiddle - React, Tailwind, and code Playground

by matt9388

HTML

<div class="block">Hover Me!!!</div>

CSS

.block{width:100px; height:100px; margin-top:50px; margin-right:auto; margin-left:auto; border: 1px solid black;}
.toolTip{ height:25px; width:100px; border: 1px solid red;}

JavaScript

$(function()
{
    $(".block").on("mouseover", function()
    {
        var div = $("<div>"); // create div element
        $("body").append(div); // append div element to body
        $(div).addClass("toolTip") // add class to div
        .css({position: "absolute",left: $(this).offset().left, top: $(this).offset().top + $(this).height()})
        .html("text");
        
        
    });
    $(".block").on("mouseout", function()
    {
        $(".toolTip").remove();
    });
});