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 all commits
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
4 changes: 2 additions & 2 deletions docs/resources/ui/components/creating-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -224,9 +224,9 @@ respective widgets and action triggers.

Aside from standard data types used throughout FlutterFlow, you can also create parameters that are of type:

- **Action (callback)**: This allows component users to pass in actions into the component. The component can then invoke the action, usually referred to as a callback, in its own action flows. Callbacks are often using to handle events, like updating a parent's state when a button has been pressed. [You can learn more about how to use callbacks here.](/resources/ui/components/callbacks)
- **Action (callback)**: This allows you to pass in actions into the component. The component can then invoke the action, usually referred to as a callback, in its own action flows. Callbacks are often using to handle events, like updating a parent's state when a button has been pressed. [You can learn more about how to use callbacks here.](/resources/ui/components/callbacks)

- **Widget Builders**: Widget builders allow the component users to pass in widgets to be used within the component's widget tree. This is especially useful when you want users to dynamically subsitute content for some part of a component - like displaying an item in a custom dropdown, or creating a component for some consistent layout. [You can learn more about how to use Widget Builders here.](widget-builder-parameters.md)
- **Widget Builders**: Widget builders allows you to pass in widgets to be used within the component's widget tree. This is especially useful when you want to dynamically substitute content for some part of a component - like displaying an item in a custom dropdown, or creating a component for some consistent layout. [You can learn more about how to use Widget Builders here.](widget-builder-parameters.md)


### Actions
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