JSFiddle - React, Tailwind, and code Playground

by meo

HTML

<div class="lookbook-container"></div>

CSS

.lookbook-container {
    position: relative;
    height: 500px;
    background: pink;
    margin: 120px 0;
}

.lookbook-container .tooltip {
    position: absolute;
    opacity: 0;
    top:0; left: 0;
    height: 20px;
    width: 20px;
    margin: -20px 0 0 -10px;
    background: red;
    
    -webkit-transition: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    transition: opacity 0.2s;
}

.lookbook-container:hover .tooltip {
    opacity: 1;
    pointer-events: none;
}

JavaScript

var plustip = function( $container ){
    var $tip; 
    
    $tip = $("<div />", {"class":"tooltip"});
    $tip.appendTo( $container );
    $container.on("mouseenter.tooltipp", function(){
        $container.on("mousemove.tooltipp", function(e){
            $tip.css({ top: e.offsetY + "px", left: e.offsetX + "px"});
        })     
        }).on("mouseleave.tooltipp", function(){
            $container.off("mousemove.tooltipp");
        });
}
        
        
plustip( $(".lookbook-container:eq(0)") );