JSFiddle - React, Tailwind, and code Playground

by 20yco

HTML

<div class="alert closer">
				<i class="close" title="Close">Х</i>
				successfully removed.
			</div>
<div class="tooltip shadow"></div>

CSS

body{
  padding: 10px;
  background: #333;
}
.tooltip {
	display: none;
	position: absolute;
	padding: 4px 8px;
	background: #272727;
	font-size: 12px;
	opacity: .9;
	z-index: 999;
}
.alert{
	padding: 10px;
	border: 1px solid #cca933;
	background: rgba(204, 169, 51, .1);
	color: #cca933;
}
.alert .close{
	float: right;
	margin-left: 10px;
	cursor: pointer;
}
.shadow{
	-webkit-box-shadow: 0 5px 20px 2px rgba(0, 0, 0, .14), 0 6px 26px 5px rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(0, 0, 0, .4);
	-moz-box-shadow: 0 5px 20px 2px rgba(0, 0, 0, .14), 0 6px 26px 5px rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(0, 0, 0, .4);
	box-shadow: 0 5px 20px 2px rgba(0, 0, 0, .14), 0 6px 26px 5px rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(0, 0, 0, .4);
}

JavaScript

(function(){
		var tooltip = $('.tooltip');
		$(document).find('[title]').hover(function(){
			tooltip.text($(this).attr('title')).fadeIn(200);
			$(this).removeAttr('title');
			var wwp = $(window).width();
			var hpw = $(window).height();
			var wtl = tooltip.outerWidth();
			var htl = tooltip.outerHeight();
			$(this).mousemove(function( kmouse ){
				var left = kmouse.pageX;
				var right;
				if((kmouse.pageX + wtl) > wwp)
					left = wwp - wtl;
				if(left < 0)
					left = 0;
				tooltip.css({left: left, top: kmouse.pageY + 25});
			});
		},
		function(){
			$(this).attr('title', tooltip.text()).unbind('mousemove');
			tooltip.text('').hide();
		});
	})();
  
  
// Скрытие сообщений
$(document).on('click', '.close', function(){
	$(this).closest('.closer').slideToggle(100, function(){
		var wrapper = $(this).closest('.alerts');
		$(this).remove();
		if(!wrapper.children('.closer').length)
    
    $('.tooltip').remove();
			wrapper.remove();
	});
});