Explore

Canvas Components

Tooltip

Lukas Pavelka

Last edited 213 days ago by Lukas Pavelka.

How to design it in Power Apps

Preview

⁠

⁠

What does it consist of?

3x Container

2x Image

1x Icon

3x Label

1x Rectangle

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(_tooltip,false)

Step 2 - create fake clickable background

Add a new Rectangle object, call it "back_screen" with this "Fill" property:

RGBA(0, 0, 0, 0)

and "OnSelect" property:

Set(_tooltip,false)

Step 3 - create title with clickable icon

Add a new Label object, call it "title" with Text property:

"Activity Growth:"

And add Image object, call it "icon_info" with Image property:

"data:image/svg+xml;utf8, " &EncodeUrl("<svg width='41' height='41' viewBox='0 0 41 41' fill='none' xmlns='http://www.w3.org/2000/svg'> <path fill-rule='evenodd' clip-rule='evenodd' d='M9.0863 18.9831V22.1831C9.0863 27.485 13.3844 31.7831 18.6863 31.7831H21.8863C27.1882 31.7831 31.4863 27.485 31.4863 22.1831V18.9831C31.4863 13.6811 27.1882 9.38306 21.8863 9.38306H18.6863C13.3844 9.38306 9.0863 13.6811 9.0863 18.9831Z' stroke='#604EB2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/> <path d='M20.2863 20.583V26.983' stroke='#604EB2' stroke-width='2' stroke-linecap='round'/> <path d='M20.2863 16.583C19.8452 16.583 19.4863 16.2242 19.4863 15.783C19.4863 15.3419 19.8452 14.983 20.2863 14.983C20.7274 14.983 21.0863 15.3419 21.0863 15.783C21.0863 16.2242 20.7274 16.583 20.2863 16.583Z' fill='#604EB2'/> <path d='M20.2863 14.183C21.17 14.183 21.8863 14.8993 21.8863 15.783C21.8863 16.6666 21.17 17.383 20.2863 17.383C19.4027 17.383 18.6863 16.6666 18.6863 15.783C18.6863 14.8993 19.4027 14.183 20.2863 14.183Z' fill='#604EB2'/> </svg>")

Step 3 - create a main tooltip container

Add a new Vertical Container PCF object, call it "tooltip_frame" with this "DropShadow" property:

DropShadow.Semibold

with padding property - top: 10, bottom:0, left: 10, right: 10

and Visible property:

_tooltip

Step 4 - create top container

Add a new Horizontal Container PCF object, call it "header_tooltip_frame" with this "Gap" property:

Add a new Image object under header_tooltip_frame, call it "chart_tooltip_icon" with this "Image" property:

"data:image/svg+xml;utf8, " &EncodeUrl("<svg width='35' height='36' viewBox='0 0 35 36' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M28.4167 12L20.4916 19.925C20.2029 20.2138 20.0585 20.3582 19.892 20.4122C19.7456 20.46 19.5877 20.46 19.4413 20.4122C19.2748 20.3582 19.1305 20.2138 18.8417 19.925L16.1166 17.2C15.8279 16.9112 15.6835 16.7668 15.517 16.7128C15.3706 16.665 15.2127 16.665 15.0663 16.7128C14.8998 16.7668 14.7555 16.9112 14.4667 17.2L8 23.6667M28.4167 12H22.5833M28.4167 12V17.8333' stroke='#604EB2' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/> </svg>")

Add a new Label object under header_tooltip_frame, call it "title_tooltip" with Text property:

"Ativity growth - Incremental"

Add a new Icon object under header_tooltip_frame, call it "close_tooltip_icon" with this "OnSelect" property:

Set(_tooltip,false)

and Icon property:

Icon.CancelBadge

Step 5 - create bottom container

Add a new Horizontal Container PCF object, call it "dscr_tooltip_frame" with this "Gap" property:

Add a new Label object under dscr_tooltip_frame, call it "dscr_tooltip" with Text property:

"Report helps navigate cumulative (all-

time) growth of community activities. Ideally, the chart should have a growing trend, as stagnating chart signifies a significant decrease of

community activity."

This is an output:

⁠

⁠

How to design it in Figma

Preview

⁠

⁠

What does it consist of?

5x Frame

3x Vector

2x Text

Procedure

Step 1 - create a tooltip frame with auto layout

Add a new Frame (F command) with vertical auto layout (SHIFT + A command) object, call it "vercont_tooltip_frame" with these properties:

⁠

⁠

⁠

Step 2 - create a header frame

Add a new Frame (F command) with horizontal auto layout (SHIFT + A command) object, call it "horcont_header_tooltip_frame" with these properties:

⁠

⁠

Import a new SVG file, call it "svg_chart_tooltip_icon" with XML code

Add a new Text (T command) object, call it "lbl_title_tooltip" with these properties:

⁠

⁠

Import a new SVG file, call it "svg_close_tooltip_icon" with XML code

Step 3 - create a content frame

Add a new Frame (F command) with horizontal auto layout (SHIFT + A command) object, call it "horcont_dscr_tooltip_frame" with these properties:

⁠

⁠

Add a new Text (T command) object, call it "lbl_dscr_tooltip" with these properties:

⁠

⁠

This is an output:

⁠

⁠

How to use it via DesignKit

Prerequisites

the designed component according to the instructions from the previous section

Used Prefixes

vercont_tooltip_frame = Vertical Container

horcont_header_tooltip_frame, horcont_dscr_tooltip_frame = Horizontal Container

svg_chart_tooltip_icon, svg_close_tooltip_icon = Image

lbl_title_tooltip, lbl_dscr_tooltip = Label

NEW YAML Output

⁠

Used Colours

Background - #FFFFFF

Font Colour - #000000

Icon Colour - #604EB2

⁠

← Todo list⁠

⁠

Vertical Stepper →⁠

⁠

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.