dioxus_element_plug/components/
tooltip.rs

1use dioxus::prelude::*;
2
3/// Tooltip placement
4#[derive(Clone, PartialEq)]
5pub enum TooltipPlacement {
6    Top, TopStart, TopEnd,
7    Bottom, BottomStart, BottomEnd,
8    Left, LeftStart, LeftEnd,
9    Right, RightStart, RightEnd,
10}
11
12impl TooltipPlacement {
13    pub fn as_str(&self) -> &'static str {
14        match self {
15            TooltipPlacement::Top => "top",
16            TooltipPlacement::TopStart => "top-start",
17            TooltipPlacement::TopEnd => "top-end",
18            TooltipPlacement::Bottom => "bottom",
19            TooltipPlacement::BottomStart => "bottom-start",
20            TooltipPlacement::BottomEnd => "bottom-end",
21            TooltipPlacement::Left => "left",
22            TooltipPlacement::LeftStart => "left-start",
23            TooltipPlacement::LeftEnd => "left-end",
24            TooltipPlacement::Right => "right",
25            TooltipPlacement::RightStart => "right-start",
26            TooltipPlacement::RightEnd => "right-end",
27        }
28    }
29}
30
31/// Tooltip props
32#[derive(Props, Clone, PartialEq)]
33pub struct TooltipProps {
34    #[props(default)]
35    pub children: Element,
36
37    /// Tooltip content
38    pub content: String,
39
40    /// Tooltip placement
41    #[props(default = TooltipPlacement::Top)]
42    pub placement: TooltipPlacement,
43
44    /// Tooltip effect (dark/light)
45    #[props(default = "dark".to_string())]
46    pub effect: String,
47
48    /// Whether the tooltip is disabled
49    #[props(default = false)]
50    pub disabled: bool,
51
52    /// Whether the tooltip is always visible
53    #[props(default = false)]
54    pub visible: bool,
55
56    /// Show delay in ms
57    #[props(default = 0)]
58    pub show_delay: u32,
59
60    /// Hide delay in ms
61    #[props(default = 0)]
62    pub hide_delay: u32,
63
64    #[props(default)]
65    pub class: Option<String>,
66
67    #[props(default)]
68    pub style: Option<String>,
69}
70
71/// Tooltip component for hover information
72#[component]
73pub fn Tooltip(props: TooltipProps) -> Element {
74    if props.disabled {
75        return rsx! { {props.children} };
76    }
77
78    rsx! {
79        span {
80            class: "el-tooltip__trigger",
81            style: "display: inline-block; position: relative;",
82            {props.children}
83            if props.visible {
84                span {
85                    class: "el-tooltip__popper is-{props.effect}",
86                    style: "position: absolute; z-index: 3000; transform: translateX(-50%); top: -100%; left: 50%;",
87                    span { class: "el-tooltip__content", "{props.content}" }
88                }
89            }
90        }
91    }
92}
dioxus_element_plug/components/tooltip.rs

dioxus_element_plug/components/
tooltip.rs
