tallyweb_components/
tooltip.rs

1use leptos::*;
2
3#[component]
4pub fn ToolTip<T: html::ElementDescriptor + Clone + 'static>(
5    parent_node: NodeRef<T>,
6    #[prop(optional, default=std::time::Duration::from_secs(1))] delay: std::time::Duration,
7    children: ChildrenFn,
8) -> impl IntoView {
9    let is_shown = create_rw_signal(false);
10    let is_hovering = create_rw_signal(false);
11    let mouse_pos = create_rw_signal((0, 0));
12
13    if let Some(element) = parent_node.get_untracked() {
14        let _ = element.clone().on(ev::mouseover, move |_: ev::MouseEvent| {
15            is_hovering.set(true);
16            set_timeout(
17                move || {
18                    if is_hovering.try_get().unwrap_or_default() {
19                        is_shown.try_set(true);
20                    }
21                },
22                delay,
23            )
24        });
25        let _ = element.clone().on(ev::mouseout, move |_: ev::MouseEvent| {
26            is_hovering.set(false);
27            is_shown.set(false);
28        });
29        let _ = element.on(ev::mousemove, move |ev: ev::MouseEvent| {
30            if !is_shown() {
31                mouse_pos.set((ev.x(), ev.y()))
32            }
33        });
34    }
35
36    view! {
37        <Show when=is_shown>
38            <tool-tip
39                style:left=move || format!("{}px", mouse_pos().0 + 8)
40                style:top=move || format!("{}px", mouse_pos().1 + 16)
41            >
42                {children()}
43            </tool-tip>
44        </Show>
45    }
46}
tallyweb_components/tooltip.rs

tallyweb_components/
tooltip.rs
