Sometimes, you may want users to focus only on a pointer bubble and prevent them from clicking on other parts of your page while the bubble is visible. This is useful when guiding users through critical steps.


Here’s how you can do it with custom CSS:

Add the following code to the CSS section of your tour’s Theme in Usetiful:


body:has([data-uf-content="bubble"])::after {
  content: "";
  position: fixed;        /* Covers the entire viewport */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: auto;   /* Ensures clicks are intercepted */
  background: transparent;
  z-index: 100;           /* Sits below the bubble */
}


This CSS makes the entire page non-clickable when the bubble is shown, ensuring the user stays focused on the highlighted area.

Important:

  • If you’re using Smart Tips that are hidden in the DOM, this CSS may block clicks elsewhere.

  • Always test your tour after applying the CSS to make sure everything works correctly.