bpk-tether

Wrapper around the Tether library, along with related utilities

Installation

npm install bpk-tether --save-dev

Tether Wrapper

A wrapper around the Tether library which extends the Tether object to emit a position event.

Usage

import { Tether } from 'bpk-tether';

this.tether = new Tether({
  classPrefix: 'bpk-popover-tether',
  element: popoverElement,
  target: targetElement,
  tetherOptions: tetherOptions,
});

this.tether.on('position', position => console.log('Tether was repositioned', position));

getArrowPositionCallback

When using Tether to create a popover or tooltip with an arrow pointing towards the target element, we want to have this arrow point to the target element at all times. To achieve this, the getArrowPositionCallback function returns a callback to be used on the position event. When invoked, it repositions the arrow element to stick to the target element.

Usage

import { Tether } from 'bpk-tether';

const classPrefix = 'bpk-popover-tether';

this.tether = new Tether({
  classPrefix,
  element: tetherElement,
  target: targetElement,
  tetherOptions: tetherOptions,
});

this.tether.on('position', getArrowPositionCallback(tetherElement, 'arrow-id', classPrefix));