Tesserae

Tippy

Description

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.

Usage

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

tippy-sample.js

using System;
using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var sampleComponent = new TippyHoverExample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class TippyHoverExample : IComponent
    {
        public HTMLElement Render()
        {
            return Stack().Children(
                Button("Hover me").Tooltip("This is a tooltip!")
            ).Render();
        }
    }
}

Methods

.Tooltip(string text, TooltipAnimation animation = TooltipAnimation.Fade, TooltipPlacement placement = TooltipPlacement.Top, int delay = 0, int duration = 200, bool interactive = false)

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).

.Tooltip(IComponent tooltipContent, TooltipAnimation animation = TooltipAnimation.Fade, TooltipPlacement placement = TooltipPlacement.Top, int delay = 0, int duration = 200, bool interactive = false)

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

Tippy.ShowFor(IComponent component, IComponent tooltipContent, out Action hide, TooltipAnimation animation = ..., ...)

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.

Samples

This sample demonstrates various tooltip configurations.

tippy-2-sample.js

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var sampleComponent = new TippySample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    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();
        }
    }
}