JSFiddle - React, Tailwind, and code Playground

by Prathameshsb

HTML

<div class='tagline-container'>
  <div class='tagline tooltip'>
    Product Designer
    <div class='tooltip-content'>
      <img src="https://media.tenor.com/DdnZxQbfO1AAAAAM/bob-ross-bob.gif" alt="Product Designer Tooltip">
    </div>
  </div>
  <div class='tagline-dot'>|</div>
  <div class='tagline tooltip'>
    Frontend Engineer
    <div class='tooltip-content'>
      <img src="https://i.pinimg.com/originals/6c/90/28/6c90288d7e10d46d18895f17f420a92c.gif" alt="Frontend Engineer Tooltip">
    </div>
  </div>
</div>

CSS

.tooltip-content {
  visibility: hidden;
  background-color: black; /* Tooltip background */
  color: white; /* Text color */
  text-align: center;
  border-radius: 4px;
  padding: 4px;

  /* Positioning */
  position: absolute;
  z-index: 1;
  transform: translateX(50%);
  
  /* Fade in effect */
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip:hover .tooltip-content {
  visibility: visible;
  opacity: 1;
}

.tooltip .tooltip-content img {
  height: 120px;
  width: 120px;
  object-fit: cover; /* Ensures the image covers the area without distorting aspect ratio */
}