Tippy.js Xuda Plugin

The Tippy.js Xuda Plugin provides customizable, lightweight tooltips and popovers for seamless integration with Xuda UI. Enhance your application with interactive, animated, and highly configurable tooltips using the power of Tippy.js.

Features

• Customizable Tooltips: Adjust styles, content, and animations to match your design.
• Interactive Popovers: Tooltips can include interactive elements such as buttons or links.
• Placement Options: Support for multiple placement options (top, bottom, left, right, etc.).
• Triggers and Events: Configurable triggers (hover, click, focus, etc.).
• Seamless Xuda Integration: Works natively with Xuda UI properties and rendering system.

Installation in Xuda Platform

1. Navigate to the Plugins tab in your Xuda project node on Xuda.io.
2. Locate the Tippy.js Xuda Plugin.
3. Install the plugin by toggling the activation button.

Usage in Xuda Studio

1. Open Xuda Studio on Xuda.io and select a UI component.
2. In the Properties Pane, scroll down to find the plugin options.
3. Activate the plugin and configure the properties as needed.

Properties

| Property | Type | Description | Default Value | | ------------------- | --------- | -------------------------------------------------------------------------- | ----------------- | | tippy_content | string | The text or HTML content to display in the tooltip. | Tooltip content | | tippy_placement | string | Sets the placement of the tooltip (e.g., top, bottom, left, right). | top | | tippy_trigger | string | Specifies the event that triggers the tooltip (e.g., hover, click, focus). | hover | | tippy_interactive | boolean | Enables interaction with the tooltip content. | false | | tippy_animation | string | Defines the animation type for the tooltip (e.g., fade, scale). | fade | | tippy_arrow | boolean | Displays an arrow pointing to the target element. | true | | tippy_delay | number | Sets the delay (in milliseconds) before the tooltip appears or hides. | 0 | | tippy_max_width | string | Defines the maximum width of the tooltip. | 300px |

Example Configuration

1. Tooltip with Custom Animation:

   • Content: Click for more info
   • Placement: right
   • Animation: scale
   • Interactive: Enabled

2. Properties Pane in Xuda Studio:

   • tippy_content: Click for more info
   • tippy_placement: right
   • tippy_animation: scale
   • tippy_interactive: true