Tooltip - Rust Radix

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

use radix_yew_icons::PlusIcon;
use radix_yew_tooltip::*;
use yew::prelude::*;

#[function_component]
pub fn TooltipDemo() -> Html {
    html! {
        <TooltipProvider>
            <Tooltip>
                <TooltipTrigger
                    as_child={Callback::from(|TooltipTriggerChildProps {
                        node_ref,
                        aria_describedby,
                        data_state,
                        onblur,
                        onclick,
                        onfocus,
                        onpointerdown,
                        onpointerleave,
                        onpointermove,
                        ..
                    }| html! {
                        <button
                            ref={node_ref}
                            aria-describedby={aria_describedby}
                            class={"inline-flex size-[35px] items-center justify-center rounded-full bg-white text-violet11 shadow-[0_2px_10px] shadow-blackA4 outline-none hover:bg-violet3 focus:shadow-[0_0_0_2px] focus:shadow-black"}
                            data-state={data_state}
                            onblur={onblur}
                            onclick={onclick}
                            onfocus={onfocus}
                            onpointerdown={onpointerdown}
                            onpointerleave={onpointerleave}
                            onpointermove={onpointermove}
                        >
                            <PlusIcon />
                        </button>
                    })}
                >
                </TooltipTrigger>
                <TooltipPortal>
                    <TooltipContent
                        class="select-none rounded bg-white px-[15px] py-2.5 text-[15px] leading-none text-violet11 shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade"
                        side_offset=5.0
                    >
                        {"Add to library"}
                        <TooltipArrow class="fill-white" />
                    </TooltipContent>
                </TooltipPortal>
            </Tooltip>
        </TooltipProvider>
    }
}

Features

Provider to control display delay globally.
Opens when the trigger is focused or hovered.
Closes when the trigger is activated or when pressing escape.
Supports custom timings.

Installation

Install the component from your command line.

cargo add radix-yew-tooltip

Anatomy

Import all parts and piece them together.

use radix_yew_tooltip::*;
use yew::prelude::*;

#[component]
fn Anatomy() -> Html {
    html! {
        <TooltipProvider>
            <Tooltip>
                <TooltipTrigger />
                <TooltipPortal>
                    <TooltipContent>
                        <TooltipArrow />
                    </TooltipContent>
                </TooltipPortal>
            </Tooltip>
        </TooltipProvider>
    }
}

API Reference

Provider

Wraps your app to provide global functionality to your tooltips.

Prop	Type	Default
`delay_duration`	`i32`	`700`
`skip_delay_duration`	`i32`	`300`
`disable_hoverable_content`	`Option<bool>`	-

Root

Contains all the parts of a tooltip.

Prop	Type	Default
`default_open`	`Option<bool>`	-
`open`	`Option<bool>`	-
`on_open_change`	`Callback<bool>`	-
`delay_duration`	`Option<i32>`	-
`disable_hoverable_content`	`Option<bool>`	-

Trigger

The button that toggles the tooltip. By default, the TooltipContent will position itself against the trigger.

Prop	Type	Default
`as_child`	`Callback<TooltipTriggerChildProps, Html>`	-

Data attribute	Values
`[data-state]`	`"closed" \| "delayed-open" \| "instant-open"`

Portal

When used, portals the content part into the body.

Prop	Type	Default
`force_mount`	`Option<bool>`	-
`container`	`Option<web_sys::Element>`	-
`container_ref`	`Option<NodeRef>`	-

Content

The component that pops out when the tooltip is open.

Prop	Type	Default
`as_child`	`Option<Callback<TooltipContentChildProps, Html>>`	-
`on_escape_key_down`	`Callback<KeyboardEvent>`	-
`on_pointer_down_outside`	`Callback<PointerDownOutsideEvent>`	-
`force_mount`	`Option<bool>`	-
`side`	`Side`	`Side::Top`
`side_offset`	`f64`	`0.0`
`align`	`Align`	`Align::Center`
`align_offset`	`f64`	`0.0`
`avoid_collisions`	`bool`	`true`
`collision_boundary`	`Vec<web_sys::Element>`	`vec![]`
`collision_padding`	`Padding`	`Padding::All(0.0)`
`sticky`	`Sticky`	`Sticky::Partial`
`hide_when_detatched`	`bool`	`false`

Data attribute	Values
`[data-state]`	`"closed" \| "delayed-open" \| "instant-open"`
`[data-side]`	`"left" \| "right" \| "bottom" \| "top"`
`[data-align]`	`"start" \| "end" \| "center"`

CSS Variable	Description
`--radix-tooltip-content-transform-origin`	The `transform-origin` computed from the content and arrow positions/offsets.
`--radix-tooltip-content-available-width`	The remaining width between the trigger and the boundary edge.
`--radix-tooltip-content-available-height`	The remaining height between the trigger and the boundary edge.
`--radix-tooltip-trigger-width`	The width of the trigger.
`--radix-tooltip-trigger-height`	The height of the trigger.

Arrow

An optional arrow element to render alongside the tooltip. This can be used to help visually link the trigger with the TooltipContent. Must be rendered inside TooltipContent.

Prop	Type	Default
`as_child`	`Option<Callback<TooltipArrowChildProps, Html>>`	-
`width`	`f64`	`10.0`
`height`	`f64`	`5.0`

Examples

TODO

Accessibility

Keyboard Interactions

Key	Description
`Tab`	Opens/closes the tooltip without delay.
`Space`	If open, closes the tooltip without delay.
`Enter`	If open, closes the tooltip without delay.
`Escape`	If open, closes the tooltip without delay.

Custom APIs

TODO