AsciiTooltip

Hover information display component with ASCII-styled borders and positioning.

Preview

Installation

npm install react-ascii-ui

Usage

import { AsciiTooltip } from 'react-ascii-ui';

export default function App() {
  return (
    <AsciiTooltip 
      content="This is helpful information!" 
      position="top"
      delay={300}
    >
      <button>Hover me</button>
    </AsciiTooltip>
  );
}

Examples

Different Positions

Top
Right
Bottom
Left

Disabled Tooltip

Disabled Tooltip (hover me)
Slow Tooltip (wait 1s)

Interactive Elements

API Reference

PropTypeDefaultDescription
contentstring-Tooltip text content
position'top' | 'right' | 'bottom' | 'left''top'Tooltip position relative to child
childrenReactNode-Element to trigger tooltip on
delaynumber500Delay before showing tooltip (ms)
classNamestring""Additional CSS classes for tooltip
disabledbooleanfalseDisable tooltip functionality

Tooltip Features

  • Four positioning options (top, right, bottom, left)
  • Automatic positioning with collision detection
  • Configurable show/hide delay
  • Controlled visibility for programmatic control
  • ASCII-styled border with monospace font
  • Responsive text wrapping for long content
  • Works with any trigger element