JSFiddle - React, Tailwind, and code Playground

by kpulkit29

HTML

<div class="container">

</div>

CSS

.container {
  width: 200px;
  height: 100px;
  background: red;
}

.container::before {
  content: 'this is a tooltip';

position: absolute;
  top: 30%;
  left: 10%; 
  width: max-content;
  background: black;
  color: white;
  padding: 10px;
  transform: translateX(20%) scale(0);
  transition: 0.2s transform;
  transform-origin: bottom center;
}

.container::after {
  top: 34%;
  left: 18%;
  position: absolute;
  content: '';
  border: 10px solid transparent;
  border-bottom-color: black;
  transform: scale(0);
  transition: 0.2s transform;
  transform-origin: bottom center;
  
}

.container:hover::before, .container:hover::after {
    transform: scale(1);
}