Cacher is the code snippet organizer for pro developers

/* CSS */
.pp-msg {
	position: fixed;
	bottom: 10px;
	right: 10px;
	width: 200px;
	padding: 10px;
	color: #fff;
	background-color: #4285f4;
	border-radius: 2px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(200px);
	transition: opacity .5s 0s, visibility 0s .5s, transform .5s;
	cursor: pointer;
	z-index: 10000;
}

.pp-msg.active {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity .5s 0s, visibility 0s 0s, transform .5s;
}

/* HTML */
<a href="#" class="pp-msg-open">Msg</a>
<div class="pp-msg">Content</div>

/* JS */
$(document).ready(function() {
	(function() {
		
		var pp_msg_Timeout;
		
		$('.pp-msg-open').click(function() {
			clearTimeout(pp_msg_Timeout);
			$('.pp-msg').addClass('active');
			pp_msg_Timeout=setTimeout(function() {$('.pp-msg').removeClass('active');}, 5000);
		});
		
		$('.pp-msg').click(function() {
			$(this).removeClass('active');
		});

	})();
});