@wedgekit/tooltip v0.0.3

Tooltip

Purpose

The Tooltip component is used to provide a pop up to provide more information.

Basic Implementation

import  Tooltip  from '@wedgekit/tooltip';

const Test = () => (
  <Tooltip message="Here is a lot more information about the thing below." suppressFocus>
    {(tooltipProps) => (
      <p {...tooltipProps} tabIndex={0}>I don't have enough information</p>
    )}
  </Tooltip>
);

Props

children

The children prop defines the JSX that the Tooltip should be attached to.

Type: (ToolTipRenderProp) => JSX

required: ✅

This function passes the tooltip render arguments into the child JSX to determine what JSX element the tooltip should be attached to. For further explanation on the arguments passed into the function see DOCUMENTATION.md

bearings

The bearings prop defines how the tooltip is positioned relative to the node.

The bearings prop has four properties: side, align, offset and fallback:

• side defines the position of the tooltip in relation to the node; it defaults to bottom
• align defines how the tooltip aligns with the node; it defaults to start
• fallback provides an alternate side and align if the tooltip is falling off the page; if absent the tooltip will be adjusted until it no longer overhangs the page - possibly covering the node

The following illustrates the interaction of side and align:

Type: Bearings

type Align = 'start' | 'center' | 'end';
type Side = 'top' | 'bottom' | 'left' | 'right';

type Bearings = {
  align: Align;
  side: Side;
  fallback?: [Side, Align];
};

Required: ❌

Default:

{
  align: 'start',
  side: 'bottom',
}

message

Type: string | JSX

required: ✅

Determines what is displayed in the tooltip component

suppressFocus

Type: boolean

required: ❌

Suppress the default focus outline on non-interactive elements. This is useful when you have, for example, a <div> that will receive the tooltip. The div needs to be focusable for accessibility, but if you just put <div tabIndex={0}> you'll get a nasty browser default outline. Suppressing this focus will prevent that from appearing.

This will typically not be set, as usually you will want a user to see where their focus is when the tooltip is open. For example, if it is in a long string of text, the user will want to know what part of text the tooltip is attached to. Only set this option on something like a piece of text that is by itself and that will be obvious what part of the text the tooltip is pointing to (this will probably be a discussion with design).