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.


Storybook failed to load.

Dark appearance

Tooltips can have a dark look too.

Storybook failed to load.

Alternative positioning

Tooltips can be positioned on any side.

Storybook failed to load.

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.

Storybook failed to load.


Backpack tooltip component.


Check the main Readme for a complete installation guide.


                                                import { useRef } from 'react';
                                                import BpkText from '@skyscanner/backpack-web/bpk-component-text';
                                                import BpkTooltip from '@skyscanner/backpack-web/bpk-component-tooltip';
                                                const App = () => (
                                                  const targetRef = useRef(null);
                                                  const target = (
                                                    <div ref={targetRef} className={'my-tooltip-target'}>
                                                      <BpkText textStyle="lg">LHR</BpkText>
                                                    ariaLabel="London Heathrow"
                                                    London Heathrow


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


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.


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.


target should be a DOM element with a ref attached to it.