Skip Navigation
React Magma

Tooltip

Tooltips display informative text when users hover over, or focus on an element.

Basic Usage

The Tooltip component should wrap the triggerring element. This trigger should be a focusable element for accessibility, such as a button.

import React from 'react';


import { Tooltip, IconButton, ButtonVariant } from 'react-magma-dom';
import { HelpOutlineIcon } from 'react-magma-icons';


export function Example() {
  const tooltipContentShort = 'What is this?';
  const tooltipContentLong = (
    <>
      Lorem ipsum <i>dolor sit amet</i>. Vel molestie no, ut vim.
    </>
  );
  const icon = <HelpOutlineIcon />;
  const ariaLabel = 'Get Help';


  return (
    <>
      <Tooltip content={tooltipContentShort}>
        <IconButton
          aria-label={ariaLabel}
          icon={icon}
          variant={ButtonVariant.link}
        />
      </Tooltip>


      <Tooltip content={tooltipContentLong}>
        <IconButton
          aria-label={ariaLabel}
          icon={icon}
          variant={ButtonVariant.link}
        />
      </Tooltip>
    </>
  );
}

Position

The Tooltip component takes a position property, that accepts the following values: bottom, left, right, top. Top is the default value.

import React from 'react';


import {
  Flex,
  FlexBehavior,
  Tooltip,
  EnumTooltipPosition,
  IconButton,
  ButtonVariant,
} from 'react-magma-dom';
import {
  KeyboardArrowRightIcon,
  KeyboardArrowLeftIcon,
  KeyboardArrowDownIcon,
  KeyboardArrowUpIcon,
} from 'react-magma-icons';


export function Example() {
  return (
    <Flex behavior={FlexBehavior.container} spacing={2}>
      <Tooltip position={EnumTooltipPosition.right} content="Tooltip right">
        <IconButton
          aria-label="Right"
          icon={<KeyboardArrowRightIcon />}
          variant={ButtonVariant.solid}
        />
      </Tooltip>


      <Tooltip position={EnumTooltipPosition.left} content="Tooltip left">
        <IconButton
          aria-label="Left"
          icon={<KeyboardArrowLeftIcon />}
          variant={ButtonVariant.solid}
        />
      </Tooltip>


      <Tooltip position={EnumTooltipPosition.bottom} content="Tooltip bottom">
        <IconButton
          aria-label="Bottom"
          icon={<KeyboardArrowDownIcon />}
          variant={ButtonVariant.solid}
        />
      </Tooltip>


      <Tooltip position={EnumTooltipPosition.top} content="Tooltip top">
        <IconButton
          aria-label="Top"
          icon={<KeyboardArrowUpIcon />}
          variant={ButtonVariant.solid}
        />
      </Tooltip>
    </Flex>
  );
}

Inverse

The isInverse property is an optional boolean, that reverses the colors so that the component can better appear on a dark background. The default value is false.

import React from 'react';


import {
  Card,
  CardBody,
  Tooltip,
  EnumTooltipPosition,
  IconButton,
  ButtonVariant,
} from 'react-magma-dom';
import { HelpOutlineIcon } from 'react-magma-icons';


export function Example() {
  const icon = <HelpOutlineIcon />;
  const content = 'Inverse tooltip';
  const ariaLabel = 'Get Help';


  return (
    <Card isInverse>
      <CardBody>
        <Tooltip
          isInverse
          position={EnumTooltipPosition.right}
          content={content}
        >
          <IconButton
            aria-label={ariaLabel}
            icon={icon}
            isInverse
            variant={ButtonVariant.link}
          />
        </Tooltip>
      </CardBody>
    </Card>
  );
}

Custom Inline Styles

Custom styles can be applied to the tooltip using different style props.

The containerStyle prop applies to the outer most container, which contains both the tooltip trigger and the tooltip popover content.

The tooltipStyle prop applies to the tooltip popover content itself, and includes the positioning, background color, border radius, font styles, padding, etc.

The arrowStyle prop applies to the arrow indicator.

Be careful changing the positioning styles for the tooltipStyle or the arrowStyle as they are brought in by an outside library named [floating-ui](https://floating-ui.com/) to deal with overflow and scrolling.
import React from 'react';


import { Tooltip, IconButton, ButtonVariant } from 'react-magma-dom';
import { HelpOutlineIcon } from 'react-magma-icons';


export function Example() {
  const icon = <HelpOutlineIcon />;
  const content = 'Styled tooltip';
  const ariaLabel = 'Get Help';


  return (
    <Tooltip
      content={content}
      arrowStyle={{ display: 'none' }}
      containerStyle={{ background: 'pink', padding: '10px' }}
      tooltipStyle={{
        border: '1px solid red',
        background: 'yellow',
        color: 'black',
        padding: '10px',
      }}
    >
      <IconButton
        aria-label={ariaLabel}
        icon={icon}
        variant={ButtonVariant.link}
      />
    </Tooltip>
  );
}

Custom Theme Styles

The values of some style properties are set in the Magma theme.

    tooltip: {
      arrowSize: '6px',
      arrowSizeDoubled: '12px',
      backgroundColor: colors.neutral700,
      fontWeight: 500,
      maxWidth: '300px',
      textColor: colors.neutral100,
      typeScale: typeScale.size01,
      zIndex: 999,
      inverse: {
        backgroundColor: colors.neutral100,
        textColor: colors.neutral700,
      },
    }


import React from 'react';


import {
  Tooltip,
  EnumTooltipPosition,
  IconButton,
  ButtonVariant,
  ThemeContext,
  magma,
} from 'react-magma-dom';
import { HelpOutlineIcon } from 'react-magma-icons';


export function Example() {
  const icon = <HelpOutlineIcon />;
  const content = 'Tooltip with custom theme';
  const ariaLabel = 'Get Help';


  const customTheme = Object.assign({}, magma, {
    tooltip: Object.assign({}, magma.tooltip, {
      arrowSize: '10px',
      arrowSizeDoubled: '20px',
      backgroundColor: magma.colors.danger,
      fontWeight: 'normal',
      typeScale: magma.typeScale.size03,
    }),
  });


  return (
    <>
      <ThemeContext.Provider value={customTheme}>
        <Tooltip content={content} position={EnumTooltipPosition.right}>
          <IconButton
            aria-label={ariaLabel}
            icon={icon}
            variant={ButtonVariant.link}
          />
        </Tooltip>
      </ThemeContext.Provider>
    </>
  );
}

Tooltip Props

This component uses forwardRef. The ref is applied to the tooltip trigger element (the children).

All of the global HTML attributes can be provided as props and will be applied to the outer-most div element that gets rendered.

arrowStyle

Description

Style properties for the arrow element

Type

CSSProperties

Default

-

children

Required

Description

The element that triggers the tooltip when it is hovered or focused. Must be a react element (not a string) and should be a focusable element to meet a11y requirements

Type

ReactElement

Default

-

containerStyle

Description

Style properties for the component container element which includes both the tooltip trigger and the tooltip popover content

Type

CSSProperties

Default

-

content

Required

Description

The content of the tooltip

Type

any

Default

-

isInverse

Description

If true, the component will have inverse styling to better appear on a dark background

Type

boolean

Default

false

open

Description

Override the default opening of the tooltip on hover/focus to remain open

Type

boolean

Default

-

position

Description

Position the tooltip appears in relation to its trigger

Type

enum, one of:
TooltipPosition.bottom
TooltipPosition.left
TooltipPosition.right
TooltipPosition.top

Default

TooltipPosition.top

tooltipStyle

Description

Style properties for the inner tooltip content

Type

CSSProperties

Default

-

On this page

Deploys by Netlify