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.

Default

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.

Installation

Check the main Readme for a complete installation guide.

Usage


                                                
                                                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>
                                                    </div>
                                                  );
                                                
                                                  <BpkTooltip
                                                    ariaLabel="London Heathrow"
                                                    id="my-tooltip"
                                                    target={target}
                                                  >
                                                    London Heathrow
                                                  </BpkTooltip>
                                                );

Props

Check out the full list of props on Skyscanner's design system documentation website.

Props

Storybook failed to load.