Onboardist UI

Hotspot

A hotspot is a widget that draws attention to an area of the screen. Often they use animation and colors to draw the eye. Here's an example:

Usage

const tooltip = new Onboardist.UI.Tooltip({
  attach: '#hotspot-button',
  placement: 'top-end',
}));

Styles

Pulse

Teardrop

Options

attach

  • Type: string|Node
  • Default: none

Either a DOM selector or a DOM node. If a selector is given and the element is not present, Onboardist will wait up to 2 seconds to appear in the DOM.

new Hotspot({ attach: 'input.my-input-class' });

new Hotspot({ attach: document.querySelector('input.my-input-class') });

name

  • Type: string
  • Default: undefined

Name for the component instance. This can be used in tours to attach components to each other. If no name is given, a random string will be generated.

events

See event handling for information on the events and subscribe options.

placement

  • Type: Placement
  • Default: `'auto'

The placement is an option that gets passed to Popper.js. It can be one of:

  • auto
  • top
  • right
  • bottom
  • left

With the additional optional modifiers:

  • -start
  • -end

So the placement top would put the tooltip off the middle of the top of the reference element, while top-start would put the tooltip at the top-left corner. Conversely, right would put it in the middle of the right side, and right-start would put it at the top-right corner.

The default auto option puts the tooltip on the side with more space available.

size

  • Type: number
  • Default: 20

Size of hotspot in pixels.

style

  • Type: string
  • Default: 'pulse'

Choose which style of hotspot to use.

← Modal →