Styling Hints

Everything about a hint can be customized: the beacon’s color, size and animation through CSS variables, and the popover through the same theming that tours use. If you haven’t read the Hints guide yet, start there.

Dimming the page

With overlay: true an open hint reads exactly like a tour step: the element is spotlighted and stays interactive, the popover frames the element (the beacon steps aside while it is up), and the other beacons wait under the overlay. Clicking the dimmed page closes the hint.

const productHints = hints({
  overlay: true,
  overlayOpacity: 0.5,
  hints: [...],
});

Beacon color and size

Beacons read two CSS variables. Set them globally on .driver-hint, or give individual beacons a className and scope the variables to it:

/* All beacons */
.driver-hint {
  --driver-hint-color: #e11d48;
  --driver-hint-size: 28px;
}

/* Only beacons carrying a class */
.my-special-hint {
  --driver-hint-color: #059669;
}

const productHints = hints({
  hints: [
    {
      element: "#export-btn",
      beacon: { className: "my-special-hint" },
      popover: { title: "A rose beacon", description: "..." },
    },
  ],
});

Static beacons

Set animate: false on a hint (or on the instance-level beacon defaults) for a still dot without the pulse. Users who prefer reduced motion get the still dot automatically.

const productHints = hints({
  // Applies to every hint; a hint's own beacon config wins.
  beacon: { animate: false },
  hints: [...],
});

Custom button text

The dismiss button says Got it by default. Change it for all hints with the instance-level buttonText, per hint through the popover, or hide it entirely with showButton: false for hints you dismiss programmatically.

const productHints = hints({
  buttonText: "Thanks, understood",
  hints: [
    {
      element: "#share-btn",
      popover: {
        title: "No button at all",
        description: "...",
        showButton: false,
      },
    },
  ],
});

Theming the popover

Hint popovers are regular Driver.js popovers, so popoverClass and the popover styling techniques apply unchanged, shown here with the same theme used across these docs:

const productHints = hints({
  popoverClass: "driverjs-theme",
  hints: [...],
});