Tooltips

When using a tooltip:

Only include supporting information that’s not essential to progress
Make sure the tooltip doesn’t obscure the element it’s explaining when opened
Use a live region to make sure that the content of the tooltip is announced to screen readers
Make sure the tooltip icon has an accessible name

If you need to include lots of information or interactive elements like buttons, use a modal instead.

Standard

A standard tooltip is triggered on click or tap. Supporting content appears to the right of the icon.

Custom position (for screens larger than 720px)

A custom position can be set to change where the supporting content appears. Use this to stop the content covering up the element that it’s explaining.

() => {
  const [position, setPosition] = React.useState("left")

  const options = [
    { label: "Left", value: "left" },
    { label: "Left, Start", value: "left-start" },
    { label: "Left, End", value: "left-end" },
    { label: "Right", value: "right" },
    { label: "Right, Start", value: "right-start" },
    { label: "Right, End", value: "right-end" },
    { label: "Top", value: "top" },
    { label: "Top, Start", value: "top-start" },
    { label: "Top, End", value: "top-end" },
    { label: "Bottom", value: "bottom" },
    { label: "Bottom, Start", value: "bottom-start" },
    { label: "Bottom, End", value: "bottom-end" },
  ]

  return (
    <>
      <div style={{ maxWidth: "20rem" }}>
        <SelectField
          name="select-field"
          value={position}
          onChange={(e) => setPosition(e.target.value)}
          label="Select position"
          options={options}
        />
      </div>
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          padding: 50,
        }}
      >
        <Tooltip open={true} tooltipId="tooltip-1" position={position}>
          <TooltipIcon />
          <TooltipMessage>{position}</TooltipMessage>
        </Tooltip>
      </div>
    </>
  )
}

() => {
  const [position, setPosition] = React.useState("left")

  const options = [
    { label: "Left", value: "left" },
    { label: "Left, Start", value: "left-start" },
    { label: "Left, End", value: "left-end" },
    { label: "Right", value: "right" },
    { label: "Right, Start", value: "right-start" },
    { label: "Right, End", value: "right-end" },
    { label: "Top", value: "top" },
    { label: "Top, Start", value: "top-start" },
    { label: "Top, End", value: "top-end" },
    { label: "Bottom", value: "bottom" },
    { label: "Bottom, Start", value: "bottom-start" },
    { label: "Bottom, End", value: "bottom-end" },
  ]

  return (
    <>
      <div style={{ maxWidth: "20rem" }}>
        <SelectField
          name="select-field"
          value={position}
          onChange={(e) => setPosition(e.target.value)}
          label="Select position"
          options={options}
        />
      </div>
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          padding: 50,
        }}
      >
        <Tooltip open={true} tooltipId="tooltip-1" position={position}>
          <TooltipIcon />
          <TooltipMessage>{position}</TooltipMessage>
        </Tooltip>
      </div>
    </>
  )
}

Within a form field

Tooltips are often included next to form labels.

If a majority of users are likely to benefit from some content, don’t hide it in a tooltip. Instead, use tooltips to avoid cluttering screens with supporting content that’s only helpful for a small number of users.

() => {
  const [isOpen, setIsOpen] = React.useState(false)

  return (
    <Form>
      <FormGroup name="tooltip-form">
        {(inputProps) => (
          <React.Fragment>
            <div className="ln-u-display-flex@sm ln-u-align-items-center ln-u-margin-bottom*1/2">
              <Tooltip
                open={isOpen}
                tooltipId="tooltip-4"
                position="right"
                priority={["bottom", "top", "left", "right"]}
                popper={{
                  modifiers: {
                    flip: {
                      enabled: true,
                      behaviour: "clockwise",
                    },
                  },
                }}
              >
                <Label
                  htmlFor={inputProps.name}
                  className="ln-u-flush-bottom ln-u-margin-right"
                >
                  Email address
                </Label>
                <TooltipIcon
                  onClick={(e) => {
                    setIsOpen(!isOpen)
                    e.preventDefault()
                  }}
                  onBlur={(e) => {
                    setIsOpen(false)
                  }}
                  onKeyDown={onKeyPress([{ name: "Escape", code: 27 }], () =>
                    setIsOpen(false)
                  )}
                />

                <TooltipMessage>
                  We’ll only email you with information about your account
                </TooltipMessage>
              </Tooltip>
            </div>

            <TextInput
              {...inputProps}
              type="email"
              placeholder="Example: ben@email.com"
            />
          </React.Fragment>
        )}
      </FormGroup>
    </Form>
  )
}

() => {
  const [isOpen, setIsOpen] = React.useState(false)

  return (
    <Form>
      <FormGroup name="tooltip-form">
        {(inputProps) => (
          <React.Fragment>
            <div className="ln-u-display-flex@sm ln-u-align-items-center ln-u-margin-bottom*1/2">
              <Tooltip
                open={isOpen}
                tooltipId="tooltip-4"
                position="right"
                priority={["bottom", "top", "left", "right"]}
                popper={{
                  modifiers: {
                    flip: {
                      enabled: true,
                      behaviour: "clockwise",
                    },
                  },
                }}
              >
                <Label
                  htmlFor={inputProps.name}
                  className="ln-u-flush-bottom ln-u-margin-right"
                >
                  Email address
                </Label>
                <TooltipIcon
                  onClick={(e) => {
                    setIsOpen(!isOpen)
                    e.preventDefault()
                  }}
                  onBlur={(e) => {
                    setIsOpen(false)
                  }}
                  onKeyDown={onKeyPress([{ name: "Escape", code: 27 }], () =>
                    setIsOpen(false)
                  )}
                />

                <TooltipMessage>
                  We’ll only email you with information about your account
                </TooltipMessage>
              </Tooltip>
            </div>

            <TextInput
              {...inputProps}
              type="email"
              placeholder="Example: ben@email.com"
            />
          </React.Fragment>
        )}
      </FormGroup>
    </Form>
  )
}

Behaviour on screens smaller than 720px

On screens smaller than 720px in width, the tooltip content will not overlay other content on the page when it is opened.

Instead, it will open below the icon and push other content on the page down. This is to stop the tooltip content obscuring other parts of the page.

On smaller screen sizes, the tooltip icon must be tapped again to close it.

() => {
  const [isOpen, setIsOpen] = React.useState(false)

  return (
    <Form>
      <FormGroup name="tooltip-form">
        {(inputProps) => (
          <React.Fragment>
            <div className="ln-u-display-flex@sm ln-u-align-items-center ln-u-margin-bottom*1/2">
              <Tooltip
                open={isOpen}
                tooltipId="tooltip-4"
                position="right"
                priority={["bottom", "top", "left", "right"]}
                popper={{
                  modifiers: {
                    flip: {
                      enabled: true,
                      behaviour: "clockwise",
                    },
                  },
                }}
              >
                <Label
                  htmlFor={inputProps.name}
                  className="ln-u-flush-bottom ln-u-margin-right"
                >
                  Email address
                </Label>
                <TooltipIcon
                  onClick={(e) => {
                    setIsOpen(!isOpen)
                    e.preventDefault()
                  }}
                  onBlur={(e) => {
                    setIsOpen(false)
                  }}
                  onKeyDown={onKeyPress([{ name: "Escape", code: 27 }], () =>
                    setIsOpen(false)
                  )}
                />

                <TooltipMessage>
                  We’ll only email you with information about your account
                </TooltipMessage>
              </Tooltip>
            </div>

            <TextInput
              {...inputProps}
              type="email"
              placeholder="Example: ben@email.com"
            />
          </React.Fragment>
        )}
      </FormGroup>
    </Form>
  )
}

() => {
  const [isOpen, setIsOpen] = React.useState(false)

  return (
    <Form>
      <FormGroup name="tooltip-form">
        {(inputProps) => (
          <React.Fragment>
            <div className="ln-u-display-flex@sm ln-u-align-items-center ln-u-margin-bottom*1/2">
              <Tooltip
                open={isOpen}
                tooltipId="tooltip-4"
                position="right"
                priority={["bottom", "top", "left", "right"]}
                popper={{
                  modifiers: {
                    flip: {
                      enabled: true,
                      behaviour: "clockwise",
                    },
                  },
                }}
              >
                <Label
                  htmlFor={inputProps.name}
                  className="ln-u-flush-bottom ln-u-margin-right"
                >
                  Email address
                </Label>
                <TooltipIcon
                  onClick={(e) => {
                    setIsOpen(!isOpen)
                    e.preventDefault()
                  }}
                  onBlur={(e) => {
                    setIsOpen(false)
                  }}
                  onKeyDown={onKeyPress([{ name: "Escape", code: 27 }], () =>
                    setIsOpen(false)
                  )}
                />

                <TooltipMessage>
                  We’ll only email you with information about your account
                </TooltipMessage>
              </Tooltip>
            </div>

            <TextInput
              {...inputProps}
              type="email"
              placeholder="Example: ben@email.com"
            />
          </React.Fragment>
        )}
      </FormGroup>
    </Form>
  )
}

Copy guidelines

Keep tooltip content short.

Don't

If information’s essential to progress, don’t hide it in a tooltip.

Delivery address

For security reasons, this has to match the address that’s linked to your card.

Don't

Was this page helpful?

Get in touch

Our team can answer any questions about using toggle buttons or give you a helping hand with your next project.

Email

Microsoft Teams

Slack

How to use a tooltip