Sholo

A lightweight (~4kb gzipped) yet powerful JavaScript engine that helps you drive the user's focus on page.

Some sample use-cases can be creating powerful feature introductions, call-to-action components, focus shifters etc.

What are the features?

Driver is compatible with all the major browsers and can be used for any of your overlay needs. Feature introductions, focus shifters, call-to-action are just a few examples.

🔆 Highlight any item on page
✋ Block user interactions
📣 Create feature introductions
👓 Add focus shifters for users
🛠️ Highly customizable – Use it anywhere for overlay
⌨️ User Friendly – Controllable by keys
🆓 MIT Licensed – Free for personal and commercial use
🕊️ Lightweight – Only ~4kb when gzipped
🌀 Consistent behavior across all major browsers

How does it do that?

In it simplest, it puts the canvas on top of the whole page and then cuts the part that is over the element to be highlighted and provides you several hooks when highlighting, highlighted or un-highlighting elements making it highly customizable.

Can you show some Examples?

Below you find some of the examples and sample use-cases on how you can use it. Run by clicking the RUN button.

Highlighting a Single Element – Without Popover

If all you want is just highlight a single element, you can do that simply by passing the selector

const driver = new Driver();
driver.highlight('#create-post');

A real world use-case for this could be highlighting an element when user is interacting with it

const focusDriver = new Driver();

// Highlight the section on focus
document.getElementById('creation-input')
  .addEventListener('focus', (e) => {
    focusDriver.focus('#creation-input');
  });

Focus any of the inputs and see how it moves the highlight from one element to the other

You can also turn off the animation or set the padding around the corner. More on it later.

Highlighting a Single Element – With Popover

If you would like to show some details alongside the highlighted element, you can do that easily by specifying title and description

const driver = new Driver();
driver.highlight({
  element: '#some-element',
  popover: {
    title: 'Title for the Popover',
    description: 'Description for it',
  }
});

You can modify the behavior of this popover also by a certain set of options. More on it below.

Popover Positioning

You can also, change the position of the popover to be either left, top, right or bottom.

const driver = new Driver();
driver.highlight({
  element: '#some-element',
  popover: {
    title: 'Title for the Popover',
    description: 'Description for it',
    position: 'left', // can be `top`, `left`, `right`, `bottom`
  }
});

On my Left On my Top On my Bottom On my Right