blog single image
blog single image
Userflow Updates

Backdrop improvements

blog author
Sebastian Seilund

November 17, 2020

We've added a few improvements that help make your tooltip backdrops look even better!

Customize the backdrop highlight

By default, there's a subtle white shadow around the tooltip target. Notice the area around the Project dropdown here:

Default backdrop

You can now customize this highlight effect in the theme editor:

Theme editor

You could, for example, make it blue and more intense:

Blue backdrop

You can flip the shadow to be cast inside the target instead of outside:

Inside backdrop

Using the Backdrop highlight spread field, you can make it appear as a solid line around the target:

Spread backdrop

Prevent users from clicking the tooltip target

The Add backdrop section in the flow builder (in the tooltip settings panel) has 2 new options:

Builder

If you flip Block tooltip target clicks to ON, the user won't be able to click anywhere in your app. Make sure to pair this with a button that takes the user to the next step.

Backdrop padding

The Backdrop padding field lets you expand the backdrop area, which is useful if the target element doesn't have natural padding. For example, turn this:

No padding

..into this:

With padding

50 sec read

blog single image
Userflow Updates

Backdrop improvements

blog author
Sebastian Seilund

November 17, 2020

We've added a few improvements that help make your tooltip backdrops look even better!

Customize the backdrop highlight

By default, there's a subtle white shadow around the tooltip target. Notice the area around the Project dropdown here:

Default backdrop

You can now customize this highlight effect in the theme editor:

Theme editor

You could, for example, make it blue and more intense:

Blue backdrop

You can flip the shadow to be cast inside the target instead of outside:

Inside backdrop

Using the Backdrop highlight spread field, you can make it appear as a solid line around the target:

Spread backdrop

Prevent users from clicking the tooltip target

The Add backdrop section in the flow builder (in the tooltip settings panel) has 2 new options:

Builder

If you flip Block tooltip target clicks to ON, the user won't be able to click anywhere in your app. Make sure to pair this with a button that takes the user to the next step.

Backdrop padding

The Backdrop padding field lets you expand the backdrop area, which is useful if the target element doesn't have natural padding. For example, turn this:

No padding

..into this:

With padding

50 sec read

We've added a few improvements that help make your tooltip backdrops look even better!

Customize the backdrop highlight

By default, there's a subtle white shadow around the tooltip target. Notice the area around the Project dropdown here:

Default backdrop

You can now customize this highlight effect in the theme editor:

Theme editor

You could, for example, make it blue and more intense:

Blue backdrop

You can flip the shadow to be cast inside the target instead of outside:

Inside backdrop

Using the Backdrop highlight spread field, you can make it appear as a solid line around the target:

Spread backdrop

Prevent users from clicking the tooltip target

The Add backdrop section in the flow builder (in the tooltip settings panel) has 2 new options:

Builder

If you flip Block tooltip target clicks to ON, the user won't be able to click anywhere in your app. Make sure to pair this with a button that takes the user to the next step.

Backdrop padding

The Backdrop padding field lets you expand the backdrop area, which is useful if the target element doesn't have natural padding. For example, turn this:

No padding

..into this:

With padding

About the author

Co-Founder of Userflow

Sebastian Seilund is the co-founder and former CEO of Userflow, where he built one of the leading user onboarding platforms for SaaS companies. With experience as a software engineer at Google and having founded multiple successful software companies, including Denmark's first user-friendly accounting software, Sebastian brings deep technical expertise to discussions about product-led growth and user experience.

Effortless Onboarding,
Powerful Results

Try the most-loved user onboarding product on the market.

CASE STUDIES

All case studies
iconicon

Evocalize

a case study

How Evocalize Boosted Product Adoption and Engagement With Userflow 

Learn how
iconicon

Visma Dinero

a case study

How Visma Dinero provides 24/7 onboarding and support with in-app content and AI Assistant.

Learn how
iconicon

Iteratively

a case study

How Iteratively gives users an awesome first-time experience

Learn how
iconicon