JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <span class="test">aaaaaaaaaa</span>
</div>

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

$('.container').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;
	frame.hide().css({
		'left': posLeft,
		'top': posTop,
		'width':200
	});
	frame.html('<div class="test2">test2</div><div class="test2">test2</div><div class="test2">test2</div>').slideToggle(150);
},function() {
	var frame = $('.frame:last');
	frame.stop().slideToggle(150, function() {
		frame.remove();
	});
});

$(document).on('click', '.test2', function() {
	$('.test').text('bbbbbbbbbbbbbbb');
});