durbok/noodl-docs
1
0
Fork 0
mirror of https://github.com/noodlapp/noodl-docs.git synced 2026-01-11 23:02:54 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source 
Co-Authored-By: kotte <14197736+mrtamagotchi@users.noreply.github.com>
Co-Authored-By: mikaeltellhed <2311083+mikaeltellhed@users.noreply.github.com>
Co-Authored-By: Tore Knudsen <18231882+torekndsn@users.noreply.github.com>
Co-Authored-By: Michael Cartner <32543275+michaelcartner@users.noreply.github.com>
This commit is contained in:
Eric Tuvesson
2023-09-05 12:08:55 +02:00
commit 53f0d6320e
2704 changed files with 76354 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
library/modules/simple-tooltips/README.md Normal file
View File

@@ -0,0 +1,65 @@
---
title: Simple Tooltips Module
hide_title: true
---
# Simple Tooltips Module
[![GitHub](https://img.shields.io/static/v1?style=plastic&logo=github&label=GitHub&message=Source%20Code)](https://github.com/noodlapp/modules/tree/main/modules/simple-tooltips)
[Demo](https://simple-tooltips-module.sandbox.noodl.app/)
This module allows you to add simple tooltips to your Noodl App, they are designed to only show text and simple HTML.
<div className="ndl-image-with-background l">
![](/library/modules/simple-tooltips/preview.png)
</div>
Included in this module are 2 new core nodes.
The visual node **Tooltip** and a logic node **Show Tooltip**.
### Getting started
After importing this module you will see 2 new nodes in the node picker called **Tooltip** and **Show Tooltip** in external libraries category.
We can start by placing the **Tooltip** node into our visual tree, and a button inside.
<div className="ndl-image-with-background l">
![](/library/modules/simple-tooltips/tooltip-setup-1.png)
</div>
After that we will do the most important part, setting the content inside the tooltip. This can be done via the Property Panel when selecting the **Tooltip** node.
<div className="ndl-image-with-background l">
![](/library/modules/simple-tooltips/property-panel-1.png)
</div>
Now when you hover the mouse on top of the button you will see the tooltip.
<div className="ndl-image-with-background l">
![](/library/modules/simple-tooltips/tooltip-setup-2.png)
</div>
But the tooltip is not in the center of the button, that is because the tooltip is taking 100% width. In most cases, the content inside is also 100% width. But if you want it to be to the content size, you can place a group above it which is content size.
<div className="ndl-image-with-background l">
![](/library/modules/simple-tooltips/tooltip-setup-3.png)
</div>
And now you have a tooltip!
### Tooltip and Show Tooltip differences
These nodes share the same inputs the only differences between them are:
- The logic node needs to have a `Node Reference` passed in so it knows where to be attached.
- The visual node has a 100% width and content size height, so it might change the layout a little.

77
library/modules/simple-tooltips/nodes/show-tooltip.md Normal file
View File

@@ -0,0 +1,77 @@
---
title: Show Tooltip
hide_title: true
---
<##head##>
# Show Tooltip
This logic node adds a tooltip to the visual tree.
<div className="ndl-image-with-background l">
![](/library/modules/simple-tooltips/show-tooltip.png)
</div>
<##head##>
## Inputs
<div className="ndl-table-35-65">
| Data | Description |
| ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Node Reference</span> | Plug in the 'This' property from a visual node to tell the tooltip where to be visible. |
| <span className="ndl-data">Allow HTML</span> | Determines if content strings are parsed as HTML instead of text. |
| <span className="ndl-data">Content</span> | The content of the tooltip. |
| <span className="ndl-data">Background Color</span> | The background color of the tooltip. |
| <span className="ndl-data">Text Style</span> | The Text Style in the tooltip. |
| <span className="ndl-data">Max Width</span> | Specifies the maximum width of the tooltip. |
| <span className="ndl-data">Arrow</span> | Determines if the tooltip has an arrow. |
| <span className="ndl-data">Corner Radius</span> | The corner radius of the tooltip. |
| <span className="ndl-data">Margin and Padding</span> | The padding of the tooltip. |
| <span className="ndl-data">Placement</span> | The preferred placement of the tooltip. |
| <span className="ndl-data">Follow Cursor</span> | Determines if the tooltip follows the user's mouse cursor. |
| <span className="ndl-data">Offset X</span> | Displaces the tooltip from its reference element in pixels (skidding). |
| <span className="ndl-data">Offset Y</span> | Displaces the tooltip from its reference element in pixels (distance). |
| <span className="ndl-data">Animation</span> | The type of transition animation. |
| <span className="ndl-data">Delay Show</span> | Delay in ms once a trigger event is fired before a tippy shows. |
| <span className="ndl-data">Delay Hide</span> | Delay in ms once a trigger event is fired before a tippy hides. |
| <span className="ndl-data">Duration Show</span> | Duration in ms of the transition animation. |
| <span className="ndl-data">Duration Hide</span> | Duration in ms of the transition animation. |
| <span className="ndl-data">Hide On Click</span> | Determines if the tippy hides upon clicking the reference or outside of the tooltip. The behavior can depend upon the trigger events used. |
| <span className="ndl-data">Trigger</span> | Determines the events that will show the tooltip. |
| <span className="ndl-data">Interactive</span> | Determines if the tooltip has interactive content inside of it, so that it can be hovered over and clicked inside without hiding. |
| <span className="ndl-data">Interactive Border</span> | Determines the size of the invisible border around the tooltip that will prevent it from hiding if the cursor left it. |
| <span className="ndl-data">Interactive Debounce</span> | Determines the time in ms to debounce the interactive hide handler when the cursor leaves the tooltip's interactive region. |
| <span className="ndl-data">Shadow Enabled</span> | Enables and disables the shadow. |
| <span className="ndl-data">Offset X</span> | The horizontal offset of the shadow. A positive value puts the shadow on the right side of the node, a negative value puts the shadow on the left side of the node. |
| <span className="ndl-data">Offset Y</span> | The vertical offset of the shadow. A positive value puts the shadow below the node, a negative value puts the shadow above node. |
| <span className="ndl-data">Blur Radius</span> | The blur radius. The higher the number, the blurrier the shadow will be. |
| <span className="ndl-data">Spread Radius</span> | The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow. |
| <span className="ndl-data">Inset</span> | Changes the shadow from an outer shadow (outset) to an inner shadow. |
| <span className="ndl-data">Shadow Color</span> | The color of the shadow. |
| Signal | Description |
| ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Show</span> | Show the tooltip. |
| <span className="ndl-signal">Hide</span> | Hide the tooltip. |
</div>
## Outputs
<div className="ndl-table-35-65">
| Data | Description |
| ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Is Open</span> | True, if the tooltip is open; Otherwise, false. |
| Signal | Description |
| ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Shown</span> | Sends a signal when the tooltip is visible. |
| <span className="ndl-signal">Hidden</span> | Sends a signal when the tooltip is hidden. |
</div>

76
library/modules/simple-tooltips/nodes/tooltip.md Normal file
View File

@@ -0,0 +1,76 @@
---
title: Tooltip
hide_title: true
---
<##head##>
# Tooltip
This visual node adds a tooltip to the visual tree.
<div className="ndl-image-with-background l">
![](/library/modules/simple-tooltips/tooltip.png)
</div>
<##head##>
## Inputs
<div className="ndl-table-35-65">
| Data | Description |
| ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Allow HTML</span> | Determines if content strings are parsed as HTML instead of text. |
| <span className="ndl-data">Content</span> | The content of the tooltip. |
| <span className="ndl-data">Background Color</span> | The background color of the tooltip. |
| <span className="ndl-data">Text Style</span> | The Text Style in the tooltip. |
| <span className="ndl-data">Max Width</span> | Specifies the maximum width of the tooltip. |
| <span className="ndl-data">Arrow</span> | Determines if the tooltip has an arrow. |
| <span className="ndl-data">Corner Radius</span> | The corner radius of the tooltip. |
| <span className="ndl-data">Margin and Padding</span> | The padding of the tooltip. |
| <span className="ndl-data">Placement</span> | The preferred placement of the tooltip. |
| <span className="ndl-data">Follow Cursor</span> | Determines if the tooltip follows the user's mouse cursor. |
| <span className="ndl-data">Offset X</span> | Displaces the tooltip from its reference element in pixels (skidding). |
| <span className="ndl-data">Offset Y</span> | Displaces the tooltip from its reference element in pixels (distance). |
| <span className="ndl-data">Animation</span> | The type of transition animation. |
| <span className="ndl-data">Delay Show</span> | Delay in ms once a trigger event is fired before a tippy shows. |
| <span className="ndl-data">Delay Hide</span> | Delay in ms once a trigger event is fired before a tippy hides. |
| <span className="ndl-data">Duration Show</span> | Duration in ms of the transition animation. |
| <span className="ndl-data">Duration Hide</span> | Duration in ms of the transition animation. |
| <span className="ndl-data">Hide On Click</span> | Determines if the tippy hides upon clicking the reference or outside of the tooltip. The behavior can depend upon the trigger events used. |
| <span className="ndl-data">Trigger</span> | Determines the events that will show the tooltip. |
| <span className="ndl-data">Interactive</span> | Determines if the tooltip has interactive content inside of it, so that it can be hovered over and clicked inside without hiding. |
| <span className="ndl-data">Interactive Border</span> | Determines the size of the invisible border around the tooltip that will prevent it from hiding if the cursor left it. |
| <span className="ndl-data">Interactive Debounce</span> | Determines the time in ms to debounce the interactive hide handler when the cursor leaves the tooltip's interactive region. |
| <span className="ndl-data">Shadow Enabled</span> | Enables and disables the shadow. |
| <span className="ndl-data">Offset X</span> | The horizontal offset of the shadow. A positive value puts the shadow on the right side of the node, a negative value puts the shadow on the left side of the node. |
| <span className="ndl-data">Offset Y</span> | The vertical offset of the shadow. A positive value puts the shadow below the node, a negative value puts the shadow above node. |
| <span className="ndl-data">Blur Radius</span> | The blur radius. The higher the number, the blurrier the shadow will be. |
| <span className="ndl-data">Spread Radius</span> | The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow. |
| <span className="ndl-data">Inset</span> | Changes the shadow from an outer shadow (outset) to an inner shadow. |
| <span className="ndl-data">Shadow Color</span> | The color of the shadow. |
| Signal | Description |
| ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Show</span> | Show the tooltip. |
| <span className="ndl-signal">Hide</span> | Hide the tooltip. |
</div>
## Outputs
<div className="ndl-table-35-65">
| Data | Description |
| ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Is Open</span> | True, if the tooltip is open; Otherwise, false. |
| Signal | Description |
| ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Shown</span> | Sends a signal when the tooltip is visible. |
| <span className="ndl-signal">Hidden</span> | Sends a signal when the tooltip is hidden. |
</div>

10
library/modules/simple-tooltips/release-notes.md Normal file
View File

@@ -0,0 +1,10 @@
---
title: Release Notes
hide_title: true
---
# Release Notes
Version 1.0 [2023-03-24]
* Add Show Tooltip node
* Add Tooltip node