Skip to main content

Tooltip

Tooltips appear on hover of a particular element and are used to provide additional context/information to the user. They are generally text only and are triggered on pointer-based interfaces.

Tooltips do not work on touchscreens, which represent a sizeable portion of Skyscanner's audience on both desktop and mobile. You are strongly advised to use an alternative solution where possible.

Table of contents

Usage advice

DoDon't
Use to provide additional information about an element on the page, shown on hover.
Don't use on touch devices (try using a popover instead).
Use text only where possible.
Don't use for long or complex content or when content includes interaction (try using a popover or modal).
For consistency, stick to using one type of tooltip (light or dark) throughout a product area or interface.
Don't use on interactive elements that can receive focus such as links, buttons and inputs.
Be aware that tooltips don't work with touchscreens and only use when absolutely necessary.
Don't mix and match light and dark tooltips within the same product or interface.

Default

YUL

Dark appearance

Tooltips can have a dark look too.

EDI

Alternative positioning

Tooltips can be positioned on any side.

DAR

Without padding

Tooltips are also available without padding, for displaying full-width content within them. In this example, the tooltip contains a full-width line.

SIN

Implementation

bpk-component-tooltip

Backpack tooltip component.

Installation

npm install bpk-component-tooltip --save-dev

Usage

import React, { Component } from 'react';
import BpkText from 'bpk-component-text';
import BpkTooltip from 'bpk-component-tooltip';

const App = () => (
  <BpkTooltip
    ariaLabel="London Heathrow"
    id="my-tooltip"
    target={<BpkText textStyle="lg">LHR</BpkText>}
  >
    London Heathrow
  </BpkTooltip>
);

Props

PropertyPropTypeRequiredDefault Value
ariaLabelstringtrue-
idstringtrue-
childrennodetrue-
targetnodetrue-
hideOnTouchDevicesboolfalsetrue
placementoneOf(['top', 'right', 'bottom', 'left'])false'bottom'
paddedboolfalsetrue
portalStyleobjectfalsenull
portalClassNamestringfalsenull
popperModifiersarrayOf(object)falsenull
renderTargetfuncfalsenull
typeoneOf(TOOLTIP_TYPES.light, TOOLTIP_TYPES.dark)falseTOOLTIP_TYPES.light

Prop Details

ariaLabel

Tooltips are invisible to assistive technologies such as screen readers. To improve accessibility, ariaLabel is required to describe the content of the tooltip to assistive technologies.

The label will be used on the target element, so any existing aria-label attached to target will be overridden.

popperModifiers

Please refer to the documentation for the underlying positioning library "Popper.js". You can achieve various behaviours such as allowing the tooltip to overflow the viewport etc.