Default

Dark appearance

Tooltips can have a dark look too.

Alternative positioning

Tooltips can be positioned on any side.

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.

                                                
                                                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>
                                                );