Tooltip positions

Intro.js automatically finds the best position for the tooltips, but you can explicitly define the tooltip position for each step using the position config:

Live Editor

introJs().setOptions({
  steps: [
  {
    element: document.querySelector('.card-demo'),
    intro: 'Tooltip has position right',
    position: 'right'
  },
  {
    element: document.querySelector('.card-demo-link'),
    intro: 'Tooltip has position left',
    position: 'left'
  },
  {
    element: document.querySelector('.card-demo-text'),
    intro: 'Tooltip has position bottom',
    position: 'bottom'
  },
  {
    element: document.querySelector('.card-demo'),
    intro: 'Tooltip has position top',
    position: 'top'
  }]
}).start();

introJs().setOptions({
  steps: [
  {
    element: document.querySelector('.card-demo'),
    intro: 'Tooltip has position right',
    position: 'right'
  },
  {
    element: document.querySelector('.card-demo-link'),
    intro: 'Tooltip has position left',
    position: 'left'
  },
  {
    element: document.querySelector('.card-demo-text'),
    intro: 'Tooltip has position bottom',
    position: 'bottom'
  },
  {
    element: document.querySelector('.card-demo'),
    intro: 'Tooltip has position top',
    position: 'top'
  }]
}).start();

Result

Quaco Lighthouse

The Quaco Head Lighthouse is a well maintained lighthouse close to St. Martins. It is a short, beautiful walk to the lighthouse along the seashore.