JSFiddle - React, Tailwind, and code Playground

by batcave

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="link js-tooltip" data-tt-text="#000000" data-tt-color="deepskyblue">color</div>

CSS

.link {
  position: relative;
  display: inline-block;
  padding: 1rem;
  background-color: gray;
}

.tooltip {
  position: absolute;
  top: 100%;
  left: 50%;
  display: inline-block;
  margin-top: 1rem;
  transform: translateX(-50%);
}

JavaScript

$('.js-tooltip').on('mouseenter', function() {
	const $this = $(this)
  
	const template = `
  	<div class="tooltip" style="background-color: ${$this.data('tt-color')}">
    	${$this.data('tt-text')}
    </div>
  `
  
  $this.append(template)
}).on('mouseleave', function() {
	const $this = $(this)
  console.log($this)
  
  $this.find('.tooltip').remove()
})