JSFiddle - React, Tailwind, and code Playground

by Ravindra Athreya

HTML

<div class="button-container">
    <button>Hover me</button>
    <div class="popover">This is the popover text!</div>
  </div>

CSS

.button-container {
      position: relative;
      display: inline-block;
      margin-top: 50px; /* To ensure popover visibility */
      color: light-dark(black, white);
    }

    .popover {
      position: absolute;
      bottom: 100%; /* Position above the button */
      left: 50%;
      transform: translateX(-50%);
      background-color: #333;
      color: #fff;
      padding: 8px 12px;
      border-radius: 4px;
      font-size: 14px;
      white-space: nowrap;
      visibility: hidden;
      opacity: 0;
      transition: opacity 0.2s, visibility 0.2s;
    }

    .popover::after {
      content: '';
      position: absolute;
      top: 100%; /* Arrow pointing to the button */
      left: 50%;
      transform: translateX(-50%);
      border-width: 5px;
      border-style: solid;
      border-color: #333 transparent transparent transparent;
    }

    .button-container:hover .popover {
      visibility: visible;
      opacity: 1;
    }

    button {
      padding: 10px 20px;
      font-size: 16px;
    }

JavaScript

document.addEventListener('DOMContentLoaded', () => {
    const button = document.querySelector('button');
    const popover = document.querySelector('.popover');

    button.addEventListener('click', () => {
      const isVisible = popover.style.visibility === 'visible';
      popover.style.visibility = isVisible ? 'hidden' : 'visible';
      popover.style.opacity = isVisible ? '0' : '1';
    });
  });