Tooltip

a primitive for creating Tooltip component.

• View ARIA pattern W3C
• View source code GitHub
• View code coverage v8-coverage
• View type documentation typedoc

Anatomy

Figure: Anatomy of Tooltip component

API Reference

const state = createTooltipTriggerState(args: TooltipTriggerStateArguments): TooltipTriggerState;

const {
  tooltipProps,
  triggerProps
} = createTooltipTrigger<T extends HTMLElement>(props: TooltipTriggerArguments, state: TooltipTriggerState, ref: Accessor<T>): AriaTooltipTrigger

const {
  tooltipProps
} = createTooltip(props: TooltipArguments, state: Accessor<TooltipTriggerState>): AriaTooltip

Parameters

createTooltipTriggerState [TooltipTriggerStateArguments]

Name	Type	Default	Description
closeDelay	number	500	The delay time for the tooltip to close.
defaultOpen	boolean	-	Whether the overlay is open by default (uncontrolled).
delay	number	1500	The delay time for the tooltip to show up.
isOpen	boolean	-	Whether the overlay is open by default (controlled).
onOpenChange	(isOpen: boolean) => void	-	Handler that is called when the overlay's open state changes.

createTooltipTrigger [TooltipTriggerArguments]

Name	Type	Default	Description
isDisabled	boolean	false	Whether the tooltip should be disabled, independent from the trigger.
trigger	'focus' | undefined	-	By default, opens for both focus and hover. Can be made to open only for focus.

Return value

createTooltipTriggerState [TooltipTriggerState]

Name	Type	Description
close *	(immediate?: boolean) => void	Hides the tooltip.
isOpen *	boolean	Whether the tooltip is currently showing.
open *	(immediate?: boolean) => void	Shows the tooltip. By default, the tooltip becomes visible after a delay depending on a global warmup timer. The `immediate` option shows the tooltip immediately instead.

createTooltipTrigger [AriaTooltipTrigger]

Name	Type	Description
triggerProps *	JSX.HTMLAttributes<any>	Props for the trigger element.
tooltipProps *	JSX.HTMLAttributes<any>	Props for the tooltip container element.

createTooltip [AriaTooltip]

Name	Type	Description
tooltipProps *	JSX.HTMLAttributes<any>	Props for the tooltip container element.

Example

Playground

Hover or Focus me

Code

import {
  createTooltip,
  createTooltipTrigger,
  createTooltipTriggerState,
  type TooltipTriggerArguments,
  type TooltipArguments
} from "solid-apg/toolbar";

import type { FlowComponent } from "solid-js";

type TooltipTriggerProps = TooltipTriggerArguments;

interface TooltipProps extends TooltipArguments {
  state: TooltipTriggerState;
}

const Tooltip: FlowComponent<TooltipProps> = (props) => {
  const [local, rest] = splitProps(props, ["state"]);
  const { tooltipProps } = createTooltip(props, () => local.state);

  const merged = mergeProps(rest, tooltipProps);

  return (
    <div class="absolute left-1/2 -translate-x-1/2 top-full mt-3 bg-white text-black p-1 border" {...merged}>
      {props.children}
    </div>
  );
};

export const TooltipTrigger: FlowComponent<TooltipTriggerProps> = (props) => {
  let trigger!: HTMLButtonElement;

  const state = createTooltipTriggerState(props);
  const { tooltipProps, triggerProps } = createTooltipTrigger(props, state, () => trigger);

  return (
    <span class="relative">
      <button class="btn" ref={trigger} {...triggerProps}>
        Hover or Focus me
      </button>
      {state.isOpen ? (
        <Tooltip {...tooltipProps} state={state}>
          {props.children}
        </Tooltip>
      ) : null}
    </span>
  );
};

Screen reader