Tooltip

The Tooltip component provides a Windows 98-style tooltip that appears when hovering over elements, displaying helpful information or context.

Import

import { Tooltip } from 'rohit-ui';

Examples

Basic Tooltip

This is a tooltip

// Basic tooltip
<Tooltip text="Hover me!">
  <button>Hover over this button</button>
</Tooltip>

Tooltip with Custom Position

Tooltip above

// Tooltip with custom position
<Tooltip 
  text="I'm on the right!"
  position="right"
>
  <button>Hover me</button>
</Tooltip>

Rohit Mode Tooltip

UNNECESSARILY COMPLICATED

// Rohit Mode tooltip
<Tooltip 
  text="I'm dramatic!"
  rohitMode
>
  <button>Hover for drama</button>
</Tooltip>

Note: In Rohit Mode, the tooltip will wiggle, change color, and sometimes randomly reposition itself.

Props

Name	Type	Default	Description
content	string	-	Text content to display in the tooltip
position	'top' \| 'right' \| 'bottom' \| 'left'	'bottom'	Position of the tooltip relative to the trigger element
delay	number	0	Delay in milliseconds before showing the tooltip
children	ReactNode	-	Element that triggers the tooltip
className	string	-	CSS class to apply to the tooltip
rohitMode	boolean	false	Enables Rohit Mode with silly animations and behaviors

CSS Customization

You can customize the Tooltip component using styled-components:

import styled from 'styled-components';
import { Tooltip } from 'rohit-ui';

const CustomTooltip = styled(Tooltip)`
  .tooltip-content {
    background: linear-gradient(45deg, var(--win98-navy), purple);
    color: white;
    border-radius: 4px;
    padding: 8px 12px;
    font-family: 'Comic Sans MS', sans-serif;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
`;

function MyComponent() {
  return (
    <CustomTooltip text="Custom styled tooltip!">
      <button>Hover me</button>
    </CustomTooltip>
  );
}

Rohit Mode Behavior

When Rohit Mode is enabled, the Tooltip component will:

Wiggle or bounce randomly
Change color periodically
Sometimes randomly reposition itself
Draw unnecessary attention to itself