Interactive guide components can be styled using manual CSS overrides, loaded inside a <style> tag on the page.

CSS Customizations for Bubbles

Border radius

ni-tooltip { --ni-border-radius: 5px }

Default background color

ni-tooltip { --ni-background-color: #fff }

Inner container background color

ni-tooltip { --ni-container-background-color: #f6f8fb }

Primary navigation button background color (e.g. 'Next')

ni-tooltip { --ni-primary-button-background-color: #1f4a88 }

Primary navigation button text color (e.g. 'Next')

ni-tooltip { --ni-primary-button-color: #fff }

Secondary navigation button background color (e.g. 'Previous')

ni-tooltip { --ni-button-background-color: transparent }

Secondary navigation text color (e.g. 'Previous')

ni-tooltip { --ni-button-color: #000 }

CSS Customizations for Dialogs

Border radius

ni-modal { --ni-border-radius: 5px }

Default background color

ni-modal { --ni-background-color: #fff }

Inner container background color

ni-modal { --ni-container-background-color: #f6f8fb }

Dialog title color

ni-modal { --ni-title-color: #000 }

Dialog title font size

ni-modal { --ni-title-font-size: 18px }

Dialog title background color

ni-modal { --ni-title-background-color: #f6f8fb }

Primary navigation button background color (e.g. 'Next')

ni-modal { --ni-primary-button-background-color: #1f4a88 }

Primary navigation button text color (e.g. 'Next')

ni-modal { --ni-primary-button-color: #fff }

Secondary navigation button background color (e.g. 'Previous')

ni-modal { --ni-button-background-color: transparent }

Secondary navigation text color (e.g. 'Previous')

ni-modal { --ni-button-color: #000 }

CSS Customizations for Hotspots

The width for Hotspots placed on the page

ni-pulse-button { --ni-size: 22px }

The background color for Hotspots placed on the page

ni-pulse-button { --ni-button-color: rgb(255, 82, 0) }

Did this answer your question?