Fluxo UIFluxo UIv0.4.1

Tooltip

A lightweight floating label that appears on hover to provide contextual information about an element. Mount <TooltipManager /> once at your app root, then call showTooltip and hideTooltip from any event handler.

Setup

App root
import { TooltipManager } from 'fluxo-ui';

function App() {
  return (
    <>
      <TooltipManager />
      {/* rest of app */}
    </>
  );
}

Basic Usage

Simple string tooltip

import { showTooltip, hideTooltip } from 'fluxo-ui';

<Button
  onMouseEnter={(e) => showTooltip(e, 'Hello, I am a tooltip!')}
  onMouseLeave={() => hideTooltip({ timeout: 0 })}
>
  Hover me
</Button>

Placements

All placement options

Hover each button to see the tooltip in that position.

showTooltip(e, { content: 'Tooltip text', placement: 'topLeft' });
showTooltip(e, { content: 'Tooltip text', placement: 'topRight' });
showTooltip(e, { content: 'Tooltip text', placement: 'bottomLeft' });
showTooltip(e, { content: 'Tooltip text', placement: 'bottomRight' });
showTooltip(e, { content: 'Tooltip text', placement: 'auto' }); // default

Rich Content (JSX)

ReactNode as tooltip content

showTooltip(e, {
  content: (
    <div className="space-y-1">
      <p className="font-semibold text-sm">Pro tip</p>
      <p className="text-xs opacity-80">
        You can render any React node inside a tooltip.
      </p>
    </div>
  ),
  placement: 'bottomLeft',
});

Custom Timeout

Tooltip with custom hide delay

The tooltip auto-hides after the configured timeout when the mouse leaves.

// Instant hide
showTooltip(e, { content: 'Text', timeout: 0 });
hideTooltip({ timeout: 0 });

// Custom delay (ms)
showTooltip(e, { content: 'Text', timeout: 3000 });
hideTooltip({ timeout: 3000 });

// Default (1500ms)
showTooltip(e, { content: 'Text' });
hideTooltip();

On Any Element

Tooltip on any element

Account balance
<span
  onMouseEnter={(e) =>
    showTooltip(e, {
      content: 'Balance is updated every 24 hours.',
      placement: 'topRight',
    })
  }
  onMouseLeave={() => hideTooltip({ timeout: 0 })}
>
  <InfoIcon />
</span>

Import

import { TooltipManager, showTooltip, hideTooltip } from 'fluxo-ui';

API Reference

TooltipOptions

contentreq
React.ReactNode | string

The content displayed inside the tooltip.

placement
'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'auto'"'auto'"

Preferred placement relative to the target. 'auto' picks the best position based on available viewport space.

timeout
number"1500"

Milliseconds before the tooltip auto-hides after the mouse leaves the target (0 = immediate).

Functions

showTooltip(e, content)
function

Show a tooltip anchored to the hovered element. Pass a string, ReactNode, or TooltipOptions object.

hideTooltip({ timeout? })
function

Explicitly hide the tooltip. Defaults to the configured timeout if not specified.

Features

Global Manager Pattern

Mount TooltipManager once at the app root and call showTooltip/hideTooltip from any event handler without prop drilling.

Smart Auto Placement

The 'auto' placement mode analyzes available viewport space and picks the best corner so tooltips never clip off-screen.

Rich Content Support

Pass any React node as tooltip content — formatted text, icons, lists, or custom JSX — not just plain strings.

Configurable Hide Delay

Set a per-tooltip timeout for how long after mouse-leave the tooltip stays visible — from instant (0 ms) to several seconds.

Hover-Safe Tooltip

Moving the mouse from the trigger onto the tooltip itself cancels the hide timer, allowing users to interact with rich content.

Works on Any Element

Attach onMouseEnter/onMouseLeave to buttons, icons, text spans, table cells, or any DOM element — no wrapper component needed.

Portal Rendering

Tooltips render in a portal above all other content, ensuring they never get clipped by overflow:hidden containers.

Theming

Full dark/light mode and all 5 brand themes supported automatically via CSS custom properties.