Skip to content

Added info on widget as tooltip + widget builders for custom widget #173

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Oct 10, 2024
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions docs/ff-concepts/adding-customization/custom-widgets.md
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,10 @@ this example, we will create a `ProductRatingBar` widget that uses a pub.dev dep
</iframe>
</div>

:::info[Widget Builder as Parameter]
You can also leverage [**Widget Builders**](../../resources/ui/components/widget-builder-parameters.md) that allow you to pass in widgets to be used within the custom widget tree. This is especially useful when you want to dynamically substitute content for some part of a custom widget - like displaying an item in a custom widget popup.
:::

### Properties: Width & Height

For custom widgets, it is mandatory to specify both width and height. These properties are required to size the custom widget appropriately. Without setting these dimensions, the custom widget will not render correctly within your application.
Expand Down
36 changes: 34 additions & 2 deletions docs/resources/ui/widgets/built-in-widgets/tooltip.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,15 @@ tags: [Base Elements]

# Tooltip

The Tooltip widget provides a textual description of a widget in a small popup box. It appears when the user taps or long-presses the widget or hovers over it. It's typically used to provide an explanation about the function of a widget.
The Tooltip widget provides additional information or visual cues of a widget in a small popup box. It appears when the user taps or long-presses the widget or hovers over it. It's typically used to provide an explanation about the function of a widget.

:::info
It is not frequently used on touch devices where tapping or long-pressing can initiate other actions. But they can be incredibly useful in the desktop environment where hover functionality is available.
:::

![tooltip.png](imgs/tooltip.png)

## Adding *Tooltip* widget
## Adding Tooltip widget

To add the *Tooltip* widget to your app:

Expand Down Expand Up @@ -51,6 +51,38 @@ Widget** and then select **Tooltip** widget.
You can customize the appearance and behavior of this widget using the various properties
available under the Properties Panel.

### Component as Tooltip

Sometimes, you may want to display more than just text in a tooltip—such as images, icons, buttons, or other custom components. For example, in an e-commerce app, a tooltip could show a detailed breakdown of customer reviews when users hover over the overall rating.

To achieve this, simply set the **Tooltip Type** to **Component** and select the custom component you'd like to display.

<div style={{
position: 'relative',
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
height: 0,
width: '100%'}}>
<iframe
src="https://demo.arcade.software/jnFUZZQ9pmCH5vgvhVVA?embed&show_copy_link=true"
title=""
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
colorScheme: 'light'
}}
frameborder="0"
loading="lazy"
webkitAllowFullScreen
mozAllowFullScreen
allowFullScreen
allow="clipboard-write">
</iframe>
</div>
<p></p>

### Change trigger mode

On touch devices, the *Tooltip* opens on tap. To make it open on long press instead, use the **Trigger Mode** property.
Expand Down