Onboardist UI

Tooltip

Usage

const tooltip = new Onboardist.UI.Tooltip({
  attach: document.querySelector('#tooltip-button'),
  title: 'Title',
  placement: 'right',
  content: 'This is the content',
  buttons: ['ok'],
}));

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 Tooltip({ attach: 'input.my-input-class' });

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

backdrop

  • Type: boolean
  • Default: false

Put a backdrop over the screen beneath the component

buttons

  • Type: array
  • Default: ['ok']

A list of buttons to show at the bottom of the component. Each element in the array can either be the string 'ok' or an object with text and handler properties:

new Hotspot({ attach: '#foo', buttons: [
  {
    text: 'Close',
    handler() { this.close() }
  },
]});

text will be the text on the button and handler will be a function that is called when the button is clicked. Make sure to use a real function and not a lambda if you want to use this to refer to the component instance.

If 'ok' is given, a button that says "Ok" and closes the tooltip will be shown.

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.

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.

← Tour →