bpk-component-tooltip

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
    id="my-tooltip"
    target={<BpkText textStyle="lg">LHR</BpkText>}
  >
    London Heathrow
  </BpkTooltip>
);

Props

Property	PropType	Required	Default Value
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	object	false	null

Prop Details

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.