Tip

note

This component is intended for staff-facing use only.

Use a tip component to allow users to "peek" at a list of items without having to open each one in a new browser tab.

The content in a tooltip should vary depending on what most helps users distinguish between items. Interactive tooltips are possible.

They're a good fit for staff-facing tools where users need to move between a large number of records or cases in a short amount of time.

Tips adapt to the available screen space, appearing above by default.

Without interactivity#

Hover to see the tip

React#

Our tip component is only compatible with React. It is based on the Tippy library.

You must attach a ref to the item that the tip should be attached to, and forward it to Tippy using forwardRef.

import React, { forwardRef } from "react"
import Tip from "lbh-frontend/lbh/components/lbh-tip"

const Trigger = forwardRef((props, ref) => (
  <a ref={ref} className="govuk-link lbh-link" href="#">
    Hover to see the tip
  </a>
))

export const MyTip = () => (
  <Tip
    content={
      <>
        <h3 className="lbh-heading-h4">Jane Smith</h3>
        <p className="lbh-body-xs">Born 27 Oct 2009 (age 12)</p>
        <p className="lbh-body-xs">Referred 8 Nov 2019</p>
      </>
    }
  >
    <Trigger />
  </Tip>
)

With interactivity#

Hover to see the tip

import React, { forwardRef } from "react"
import Tip from "lbh-frontend/lbh/components/lbh-tip"

const Trigger = forwardRef((props, ref) => (
  <a ref={ref} className="govuk-link lbh-link" href="#">
    Hover to see the tip
  </a>
))

export const MyInteractiveTip = () => (
  <Tip
    interactive={true}
    content={
      <>
        <h3 className="lbh-heading-h4">
          <a href="#" className="lbh-link">
            Jane Smith
          </a>
        </h3>
        <p className="lbh-body-xs">Born 27 Oct 2009 (age 12)</p>
        <p className="lbh-body-xs">Referred 8 Nov 2019</p>
      </>
    }
  >
    <Trigger />
  </Tip>
)