JSFiddle - React, Tailwind, and code Playground

by malamine_kebe

HTML

<div class="test">aaaaaaaaaaaaaaaaaa</div>

CSS

.box{
	z-index:2;
	position: absolute;
}

.test{
	z-index:1;
}

JavaScript

box = function(el) {
	$('body').append('<div class="box"></div>');
	var box = $('.box:last');
	var posTop = el.offset().top;
	var posLeft = el.offset().left;
	box.hide().css({
		'left': posLeft,
		'top': posTop
 }).html('azerty<br>azerty<br>azerty<br>azerty<br>azerty<br>azerty<br>azerty').slideToggle(150);
}

boxStop = function() {
    var box = $('.box:last');
    box.stop().slideToggle(150, function() {box.remove();});
}

$(document).on('mouseover', '.test', function() {
	box($(this));
}).on('mouseout', function() {
	boxStop();
});