Explore

Multiple-step Tooltip

How to design it in Power Apps

Preview

⁠

⁠

What does it consist of?

2x Container

2x Circle

4x Label

1x Button

1x Image

Procedure

Step 1 - create boolean variable on Screen

When you create a new screen(or use already created) you should create a variable on "OnVisible" property:

Set(_step2,false);Set(_tooltip,false)

Step 2 - create main container

Add a new Manual Container PCF, call it "tooltip" with this "Border radius" property:

Step 3 - create header container

Add a new Horizontal Container PCF, call it "Header" with this "Border radius" property:

And Label object under "Header", call it "Welcome" with Text property:

"Welcome"

And Label object under "Header", call it "close" with Text property:

"X"

Step 4 - create content container

Add a new Label object and call it "step1_content" with Text property:

"This is a quick tutorial to help you get familiar with the basic function of the app"

Add a new Label object and call it "step2_content" with Text property:

"The application includes easy step to reduce multiple costs"

Add a new Button object and call it "Next" with Text property:

If(_step2,"CLOSE","NEXT")

and "OnSelect" property:

If(Next.Text = "NEXT", Set(_step2,true),Set(_tooltip,false))

Add a new Circle object and call it "step1" with Fill property:

RGBA(100, 79, 176, 1)

Add a new Circle object and call it "step2" with Fill property:

If(_step2,RGBA(100, 79, 176, 1), RGBA(255, 255, 255, 1))

And Image object and call it "background" with Image property:

"data:image/svg+xml;utf8, " &EncodeUrl("<svg width='535' height='246' viewBox='0 0 535 246' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M0 16.5985C0 7.43141 7.43142 0 16.5985 0H267.403H518.207C527.374 0 534.805 7.43142 534.805 16.5985V228.728C534.805 237.895 527.374 245.327 518.207 245.327H335.059C322.648 245.327 300.187 233.655 287.907 231.858C282.163 231.017 274.836 230.5 265.5 230.5C249.874 230.5 239.37 231.948 232.312 233.939C222.454 236.72 208.63 245.327 198.387 245.327H16.5985C7.43142 245.327 0 237.895 0 228.728V16.5985Z' fill='#C04FA5'/> </svg>")

This is an output:

⁠

⁠

How to use it via DesignKit

Used Prefixes

cont_tooltip = Manual Container

ci_step1, ci_step2 = Circle

horcont_Header = Horizontal Container

lbl_step1_content, lbl_step2_content = Label

btn_Next = Button

svg_background = Image

YAML Output

⁠

Used Colours

Header Colour - #644FB0

Content Colour - #C04FA5

Text Colour - #FFFFFF

⁠

← TextArea with special chars⁠

⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.