feat: Popover adds tooltip prop (#164)

Author: luoxiaozero

demo/src/components/demo.rs

@@ -68,7 +68,7 @@ pub fn Demo(demo_code: DemoCode, #[prop(optional)] children: Option<Children>) -
                     view! {
                         <div class="demo-demo__view">{children()}</div>
                         <div class="demo-demo__toolbar" class=("demo-demo__toolbar--code", move || !is_show_code.get())>
-                            <Popover>
+                            <Popover tooltip=true>
                                 <PopoverTrigger slot>
                                     <span on:click=move |_| is_show_code.update(|show| *show = !*show) class="demo-demo__toolbar-btn">
                                         {

demo_markdown/docs/popover/mod.md

@@ -129,12 +129,28 @@ view! {
 }
 ```
 
+### Tooltip
+
+```rust demo
+view! {
+    <Space>
+        <Popover tooltip=true>
+            <PopoverTrigger slot>
+                <Button>"Hover"</Button>
+            </PopoverTrigger>
+            "Content"
+        </Popover>
+    </Space>
+}
+```
+
 ### Popover Props
 
 | Name      | Type                                | Default                 | Description                   |
 | --------- | ----------------------------------- | ----------------------- | ----------------------------- |
 | class     | `OptionalProp<MaybeSignal<String>>` | `Default::default()`    | Content class of the popover. |
 | placement | `PopoverPlacement`                  | `PopoverPlacement::Top` | Popover placement.            |
+| tooltip   | `bool`                              | `false`                 | Tooltip.                      |
 | children  | `Children`                          |                         | The content inside popover.   |
 
 ### Popover Slots

thaw/src/popover/mod.rs

@@ -21,17 +21,26 @@ pub fn Popover(
     #[prop(optional)] trigger_type: PopoverTriggerType,
     popover_trigger: PopoverTrigger,
     #[prop(optional)] placement: PopoverPlacement,
+    #[prop(optional)] tooltip: bool,
     children: Children,
 ) -> impl IntoView {
     mount_style("popover", include_str!("./popover.css"));
     let theme = use_theme(Theme::light);
     let css_vars = create_memo(move |_| {
         let mut css_vars = String::new();
         theme.with(|theme| {
-            css_vars.push_str(&format!(
-                "--thaw-background-color: {};",
-                theme.time_picker.panel_background_color
-            ));
+            let background_color = if tooltip {
+                &theme.popover.tooltip_background_color
+            } else {
+                &theme.popover.background_color
+            };
+            css_vars.push_str(&format!("--thaw-background-color: {};", background_color));
+            let font_color = if tooltip {
+                "#fff"
+            } else {
+                &theme.common.font_color
+            };
+            css_vars.push_str(&format!("--thaw-font-color: {};", font_color));
         });
         css_vars
     });
@@ -129,7 +138,7 @@ pub fn Popover(
                     let:display
                 >
                     <div
-                        class="thaw-popover"
+                        class=if tooltip { "thaw-popover thaw-popover--tooltip" } else { "thaw-popover" }
                         style=move || {
                             display.get().map(|d| d.to_string()).unwrap_or_else(|| css_vars.get())
                         }

thaw/src/popover/popover.css

@@ -2,6 +2,7 @@
     position: relative;
     padding: 8px 14px;
     background-color: var(--thaw-background-color);
+    color: var(--thaw-font-color);
     border-radius: 3px;
     transform-origin: inherit;
 }

thaw/src/popover/theme.rs

@@ -3,18 +3,21 @@ use crate::theme::ThemeMethod;
 #[derive(Clone)]
 pub struct PopoverTheme {
     pub background_color: String,
+    pub tooltip_background_color: String,
 }
 
 impl ThemeMethod for PopoverTheme {
     fn light() -> Self {
         Self {
             background_color: "#fff".into(),
+            tooltip_background_color: "#262626".into(),
         }
     }
 
     fn dark() -> Self {
         Self {
             background_color: "#48484e".into(),
+            tooltip_background_color: "#48484e".into(),
         }
     }
 }