Implementation:Apache Druid PortalBubble

Knowledge Sources	Apache_Druid
Domains	Web_Console, UI_Overlays
Last Updated	2026-02-10 10:00 GMT

Overview

PortalBubble is a React portal-based tooltip bubble component that renders a positioned popup with an optional directional arrow (shpitz) at specified screen coordinates.

Description

The component uses React's createPortal to render a floating bubble directly into the document body, ensuring it overlays all other content regardless of parent overflow constraints. It automatically clamps horizontal positioning to keep the bubble within the viewport and adjusts the arrow indicator to maintain alignment with the target point. The bubble supports both upward and downward orientations, an optional title bar with close button, and a mute mode for reduced visual emphasis.

Usage

Used in the Druid web console for displaying contextual tooltips, hover information, and small popover content at arbitrary screen positions, such as over chart segments or table cells.

Code Reference

Source Location

• Repository: Apache Druid
• File: web-console/src/components/portal-bubble/portal-bubble.tsx
• Lines: 1-102

Signature

export interface PortalBubbleOpenOn {
  x: number;
  y: number;
  title?: string;
  text: ReactNode;
}

export interface PortalBubbleProps {
  className?: string;
  openOn: PortalBubbleOpenOn | undefined;
  offsetElement?: Element;
  direction?: 'up' | 'down';
  onClose?(): void;
  mute?: boolean;
  minimal?: boolean;
}

export const PortalBubble: React.FC<PortalBubbleProps>;

Import

import { PortalBubble } from './components/portal-bubble/portal-bubble';

I/O Contract

Inputs

Name	Type	Required	Description
openOn	PortalBubbleOpenOn or undefined	Yes	The coordinates (x, y), title, and content for the bubble; undefined hides it
className	string	No	Additional CSS class name for the bubble container
offsetElement	Element	No	A DOM element whose bounding rect offsets the x/y coordinates
direction	'up' or 'down'	No	The direction the bubble arrow points (defaults to 'up')
onClose	() => void	No	Callback invoked when the close button is clicked; presence enables the close button
mute	boolean	No	When true and no onClose handler, applies a muted visual style
minimal	boolean	No	When true, hides the arrow indicator and removes vertical offset

Outputs

Name	Type	Description
React.ReactPortal or null	Portal	A React portal rendered into document.body, or null if openOn is undefined

Usage Examples

Tooltip bubble on hover

<PortalBubble
  openOn={hoverInfo ? {
    x: hoverInfo.x,
    y: hoverInfo.y,
    title: 'Segment Info',
    text: <div>{hoverInfo.details}</div>,
  } : undefined}
  direction="up"
  onClose={() => setHoverInfo(undefined)}
/>

Related Pages

• Environment:Apache_Druid_Web_Console_Development