JSFiddle - React, Tailwind, and code Playground

HTML

<a target="_blank" id="preview-card" href="customer_activity.php?id=50362">50362<div class="journal-notes details" style="display: none;">
			<div class="journal-item">
			<div id="journalid_50322" class="journal ">Waiver Requested - ISE</div>
				<div class="journal-meta">Entered on: 05-09-2017 10:4 am<br>Entered by: BRADSP</div>
			</div></div></a>

CSS

#preview-card {
	position:relative;
}
.details {
	display: none;
	position: absolute;
	padding: 4px 8px;
	font-size: 14px;
	line-height: 1.4;
	min-width: 500px;
	border-radius: 4px;
	top: 50%;
	-ms-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	left: 100%;
	margin-left: 6px;
}
.details:after {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	border-color: transparent;
	border-style: solid;
	top: 50%;
	margin-top: -6px;
}

JavaScript

$("#preview-card").hover(function() {
    $(this).find(".details").stop(true, true).fadeIn();
}, function() {
    $(this).find(".details").stop(true, true).fadeToggle();
});