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) }