JSFiddle - React, Tailwind, and code Playground

by Jannis Rohden

HTML

<button data-tooltip="Ich bin ein Tooltip">
Hover me
</button>
<span class="tooltip"></span>

CSS

.tooltip {
	background: #212121;
	color: #ecf0f1;
	padding: 0.5rem 1rem;
	font-size: 0.9rem;
	display: none;
	position: fixed;
}

JavaScript

$('[data-tooltip]').on('mouseover', function() {
	$('.tooltip').html($(this).attr('data-tooltip'));
	if($(this).offset().top >= $('.tooltip').innerHeight()) {
		
	}
	$('.tooltip').fadeIn();
	
});