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.

Edit page

Usage advice
Default
Dark appearance
Alternative positioning
Without padding
Implementation

Usage advice

Do	Don'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

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

Property	PropType	Required	Default Value
ariaLabel	string	true	-
id	string	true	-
children	node	true	-
target	node	true	-
hideOnTouchDevices	bool	false	true
placement	oneOf(['top', 'right', 'bottom', 'left'])	false	'bottom'
padded	bool	false	true
portalStyle	object	false	null
portalClassName	string	false	null
popperModifiers	arrayOf(object)	false	null
renderTarget	func	false	null
type	oneOf(`TOOLTIP_TYPES.light`, `TOOLTIP_TYPES.dark`)	false	`TOOLTIP_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.