Tooltip
Dynamically displays simple informative content on end user interaction.
Use the Tooltip to show informative text when end users hover over, focus on or tap an element. Tooltips can identify or describe an element with simple text, not supporting complex text or operations.
How to use
Drag the Block to the screen, add your content and the tooltip text in the placeholders.
- Drag the tooltip into preview.
- Set the widget in the Widget Placeholder.
-
Set the content on the Content Placeholder.
Input Parameters
| Input Name | Description | Type | Mandatory | Default Value |
|---|---|---|---|---|
| Trigger | Set the type of trigger for the content. | Trigger Identifier | False | Entities.Trigger.Hover |
| IsVisible | If set as true, the block is visible when the page is first loaded (without the need for the initial trigger). | Boolean | False | False |
| Position | Set the position around the widget element. | PositionBase Identifier | False | Entities.PositionBase.Top |
| ExtendedClass | Add custom style classes to this Block. | Text | False | none |
| AdvancedFormat | Allow for more options beyond what it's provided through the input parameters. Example: { arrow: false } For more information visit: https://atomiks.github.io/tippyjs/ |
Text | False | none |
Layout and Classes
Events
| Event Name | Description | Mandatory |
|---|---|---|
| OnHide | Event triggered once the tooltip is hidden. | False |
| OnShow | Event triggered once the tooltip is shown. | False |
Advanced Use Case
Change Animation of tooltip
- Drag a Tooltip to the preview.
-
Set the AdvancedFormat parameter to
{ animation: 'perspective' }.