JSFiddle - React, Tailwind, and code Playground

HTML

<span class="test">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>

CSS

.frame{
	position: absolute;
	border-width:1px;
	border-style:dotted;
	border-color:black;
    background-color:#fff;
}

.test{
	border-width:1px;
	border-style:dotted;
	border-color:black;
}

JavaScript

$('.test').hover(function() {
	var el = $(this);
	var elWidth = el.width();
	$(el).append('<div class="frame"></div>');
	var frame = $('.frame:last');
	var posTop = el.offset().top;
	var posLeft = el.offset().left;
	//el.hide();
	frame.hide().css({
		'left': posLeft,
		'top': posTop,
		'width':elWidth
	}).html('<div class="qwerty">qwerty</div><div class="qwerty">qwerty</div><div class="qwerty">qwerty</div>').slideToggle(150);
    
    
},function() {
	var frame = $('.frame:last');
	frame.slideToggle(150, function() {
		frame.remove();
		$('.test').show();
	});
});