# Tippy

Tippy provides tooltip functionality for UI components. It wraps the Tippy.js library to offer highly customizable tooltips, including support for text, HTML content, or other Tesserae components inside the tooltip.

The most common way to use Tippy is via the .Tooltip() extension method available on IComponent.

Button("Hover me").Tooltip("This is a tooltip!");

• Attaches a text tooltip to the component.
• Parameters:
  • text: The text to display.
  • animation: Animation style (e.g., Fade, ShiftAway).
  • placement: Position of the tooltip (e.g., Top, Bottom).
  • delay: Delay in milliseconds before showing.
  • duration: Animation duration.
  • interactive: If true, users can interact with the tooltip content (e.g., select text).

• Attaches a component-based tooltip.
• Parameters:
  • tooltipContent: The component to display inside the tooltip.

• Manually shows a tooltip for a specific component.
• Parameters:
  • component: The target component.
  • tooltipContent: The content of the tooltip.
  • hide: (Out) An action to programmatically hide the tooltip.

This sample demonstrates various tooltip configurations.

using Tesserae;
using static Tesserae.UI;

public class TippySample : IComponent
{
    public HTMLElement Render()
    {
        return Stack().Children(
            Button("Simple Tooltip").Tooltip("Just text"),

            Button("Component Tooltip").Tooltip(
                Stack().Children(
                    TextBlock("Header").SemiBold(),
                    TextBlock("This tooltip contains a stack of components.")
                )
            ),

            Button("Interactive Tooltip").Tooltip(
                Button("Click inside tooltip").OnClick(() => Toast().Success("Clicked!")),
                interactive: true
            )
        ).Render();
    }
}