Tooltip

tooltip-1779355893616.tsx

'use client';

import React, { useState } from 'react';

interface TooltipProps {
  children: React.ReactNode;
  content: string;
  direction?: 'top' | 'bottom' | 'left' | 'right';
}

const Tooltip: React.FC<TooltipProps> = ({ children, content, direction = 'top' }) => {
  const [show, setShow] = useState(false);
  const [x, setX] = useState(0);
  const [y, setY] = useState(0);

  const handleMouseOver = (e: React.MouseEvent) => {
    const rect = (e.target as HTMLDivElement).getBoundingClientRect();
    setX(rect.left + rect.width / 2);
    setY(rect.top + rect.height / 2);
    setShow(true);
  };

  const handleMouseOut = () => {
    setShow(false);
  };

  return (
    <div
      className="relative inline-block"
      onMouseOver={handleMouseOver}
      onMouseOut={handleMouseOut}
    >
      {children}
      {show && (
        <div
          className={`absolute z-10 bg-zinc-950 text-gold-500 text-sm py-2 px-4 rounded transition-opacity duration-300 ${
            direction === 'top'
              ? 'bottom-full left-1/2 -translate-x-1/2 mb-2'
              : direction === 'bottom'
              ? 'top-full left-1/2 -translate-x-1/2 mt-2'
              : direction === 'left'
              ? 'right-full top-1/2 -translate-y-1/2 mr-2'
              : 'left-full top-1/2 -translate-y-1/2 ml-2'
          } ${show ? 'opacity-100' : 'opacity-0'}`}
          style={{
            transitionDelay: show ? '0ms' : '0ms',
          }}
        >
          {content}
          <div
            className={`absolute w-0 h-0 border-x-zinc-950 border-y-gold-500 ${
              direction === 'top'
                ? 'bottom-0 left-1/2 -translate-x-1/2 border-b-gold-500 border-t-zinc-950'
                : direction === 'bottom'
                ? 'top-0 left-1/2 -translate-x-1/2 border-t-gold-500 border-b-zinc-950'
                : direction === 'left'
                ? 'right-0 top-1/2 -translate-y-1/2 border-r-gold-500 border-l-zinc-950'
                : 'left-0 top-1/2 -translate-y-1/2 border-l-gold-500 border-r-zinc-950'
            }`}
          />
        </div>
      )}
    </div>
  );
};

export default Tooltip;

Component info

CategoryOverlays

Frameworkreact

TierFREE

Copies0

About

Smart tooltip with arrow pointer

More from Overlays

import React, { useState } from 'react';
import './SlideDrawer.css';

interface SlideDrawerProps {
  isOpen: boolean;
  onClose: () => void;
  children: React.ReactNode;
}

const SlideDrawer: React.FC<SlideDrawerProps> = ({ isOpen, onClose, children

SlideDrawer

Overlays

import React, { useState } from 'react';

interface ContextMenuProps {
  children: React.ReactNode;
}

const ContextMenu: React.FC<ContextMenuProps> = ({ children }) => {
  const [showMenu, setShowMenu] = useState(false);
  const [x, setX] = useState

ContextMenu

Overlays

'use client';

import React, { useState } from 'react';

interface AlertDialogProps {
  isOpen: boolean;
  onClose: () => void;
  onConfirm: () => void;
  title: string;
  description: string;
}

const AlertDialog: React.FC<AlertDialogProps> = ({
  i

AlertDialog

Overlays

'use client';

import { useState, useEffect } from 'react';

interface Command {
  id: number;
  title: string;
  description: string;
}

const commands: Command[] = [
  { id: 1, title: 'New File', description: 'Create a new file' },
  { id: 2, title

CommandPalette

Overlays