Tooltip

tooltip-1779394643373.tsx

'use client'
import { useState } from 'react'

export default function Tooltip({ content = 'This is a tooltip!', placement = 'top', children }) {
  const [visible, setVisible] = useState(false)
  const PLACEMENTS = {
    top: { bottom:'calc(100%+8px)', left:'50%', transform:'translateX(-50%)' },
    bottom: { top:'calc(100%+8px)', left:'50%', transform:'translateX(-50%)' },
    left: { right:'calc(100%+8px)', top:'50%', transform:'translateY(-50%)' },
    right: { left:'calc(100%+8px)', top:'50%', transform:'translateY(-50%)' },
  }
  const p = PLACEMENTS[placement] || PLACEMENTS.top
  return (
    <div style={{ position:'relative', display:'inline-flex' }}>
      <div
        onMouseEnter={()=>setVisible(true)}
        onMouseLeave={()=>setVisible(false)}
        style={{ cursor:'default' }}
      >
        {children || (
          <button style={{ background:'#6d28d9', color:'#fff', border:'none', borderRadius:'8px', padding:'8px 16px', cursor:'pointer', fontWeight:600 }}>
            Hover me
          </button>
        )}
      </div>
      {visible && (
        <div style={{
          position:'absolute', ...p, zIndex:1000,
          background:'#1e1e2e', color:'#e2e8f0',
          padding:'6px 12px', borderRadius:'8px', fontSize:'12px', fontWeight:500,
          whiteSpace:'nowrap', boxShadow:'0 4px 16px rgba(0,0,0,0.25)',
          animation:'fadeIn 0.15s ease', pointerEvents:'none',
        }}>
          <style>{'@keyframes fadeIn{from{opacity:0;transform:translateX(-50%) scale(0.95)}to{opacity:1;transform:translateX(-50%) scale(1)}}'}</style>
          {content}
        </div>
      )}
    </div>
  )
}

Component info

CategoryOverlays

Frameworkreact

TierFREE

Copies0

About

Smart tooltip with multiple placement options and animation

More from 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

'use client'
import { useState, useEffect } from 'react'

const notifications = [
  { id: 1, type: '🎉', title: 'New component published', time: '2m ago', read: false },
  { id: 2, type: '💰', title: 'Pro subscription active', time: '1h ago', read: f

DrawerPanel

Overlays

'use client';

import { useState } from 'react';

interface BottomSheetProps {
  isOpen: boolean;
  onClose: () => void;
}

const BottomSheet = ({ isOpen, onClose }: BottomSheetProps) => {
  const [isDragging, setIsDragging] = useState(false);
  cons

BottomSheet

Overlays