CSS for Walkthroughs

Updated 4 months ago by Axel Resnik

The balloons and tooltips can be set to a default design on Walkthroughs. To do this:

  1. On the Walkthrough menu, select 'Design'
  1. Personalize the look and feel of the balloons. The preview will automatically update after every update, showing the latest version.
    1. Regular steps and Announcements steps can both be customized individually.
  1. You can customize using any or all of the below selectors.
Regular step selector
Target

.simpo-walkthrough-container-tooltip

Main tooltip container

.simpo-walkthrough-container-tooltip .simpo-walkthrough-button

Button design

.simpo-walkthrough-container-tooltip .simpo-walkthrough-button:hover

Button design on hover

.simpo-walkthrough-container-tooltip .simpo-walkthrough-button button 

Text inside the buttons

.simpo-walkthrough-container-tooltip .simpo-walkthrough-button button:hover

Text inside the buttons on hover

.simpo-walkthrough-container-tooltip .simpo-walkthrough-arrow

Step arrow

.simpo-walkthrough-container-tooltip svg

X (Close) icon design

.simpo-walkthrough-container-tooltip p

Text inside the container


Announcement step selector
Target

.simpo-walkthrough-container-announcement

Main announcement container

.simpo-walkthrough-container-announcement .simpo-walkthrough-button

Button design

.simpo-walkthrough-container-announcement .simpo-walkthrough-button:hover

Button design on hover

.simpo-walkthrough-container-announcement .simpo-walkthrough-button button 

Text inside the buttons

.simpo-walkthrough-container-announcement .simpo-walkthrough-button button:hover

Text inside the buttons on hover

.simpo-walkthrough-container-announcement .simpo-walkthrough-arrow

Step arrow

.simpo-walkthrough-container-announcement p

Text inside the container

We can be contacted by email at support@simpo.io if you need assistance or have any questions


How Did We Do?