Skip to main content

shadow_design/
tooltip.rs

1use dioxus::prelude::*;
2
3#[derive(Clone, Copy, PartialEq, Debug, Default)]
4pub enum TooltipPosition {
5    #[default]
6    Top,
7    Bottom,
8    Left,
9    Right,
10}
11
12impl TooltipPosition {
13    pub fn bubble_class(&self) -> &'static str {
14        match self {
15            TooltipPosition::Top => "sd-tooltip__bubble--top",
16            TooltipPosition::Bottom => "sd-tooltip__bubble--bottom",
17            TooltipPosition::Left => "sd-tooltip__bubble--left",
18            TooltipPosition::Right => "sd-tooltip__bubble--right",
19        }
20    }
21}
22
23#[component]
24pub fn Tooltip(
25    content: String,
26    #[props(default)] position: TooltipPosition,
27    #[props(default)] glow: Option<bool>,
28    #[props(default)] class: String,
29    children: Element,
30) -> Element {
31    let position_class = position.bubble_class();
32
33    #[cfg(feature = "theme")]
34    let theme = crate::theme::use_theme();
35    #[cfg(feature = "theme")]
36    let glow_class = match glow {
37        Some(true) => "sd-tooltip__bubble--glow",
38        Some(false) => "",
39        None => {
40            if theme().glow_mode != crate::theme::GlowMode::Off {
41                "sd-tooltip__bubble--glow"
42            } else {
43                ""
44            }
45        }
46    };
47
48    #[cfg(not(feature = "theme"))]
49    let glow_class = if glow == Some(true) {
50        "sd-tooltip__bubble--glow"
51    } else {
52        ""
53    };
54
55    rsx! {
56        div {
57            class: "sd-tooltip {class}",
58            {children}
59            div {
60                class: "sd-tooltip__bubble {position_class} {glow_class}",
61                "{content}"
62            }
63        }
64    }
65}