Onboardist UI

Modal


Usage

const modal = new Onboardist.UI.Modal({
  title: 'This is a modal',
  content: 'This is the content',
}));

Options

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.

backdrop

  • Type: boolean
  • Default: true

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.

title

  • Type: string
  • Default: undefined

Displays a title row across the top of the modal. If not set there will be no title row.

content

  • Type: string
  • Default: undefined

Content to put in the body of the modal. You can use html.

← Tooltip →