1use vertigo::{Computed, Css, DomNode, bind, component, css, dom};
2
3#[derive(Clone, Default)]
4pub struct PopupParams {
5 pub css: Css,
6}
7
8fn popup_css() -> Css {
9 css! {"
10 visibility: hidden;
11 position: absolute;
12 z-index: 1;
13 "}
14}
15
16fn operator_css() -> Css {
17 css! {"
18 position: relative;
19 display: inline-block;
20 "}
21}
22
23#[component]
24pub fn Popup(visible: Computed<bool>, content: DomNode, params: PopupParams) {
25 let popup_css = popup_css();
26
27 let container_css = bind!(
28 popup_css,
29 params,
30 visible.map(move |enabled| {
31 let base_css = operator_css();
32
33 if enabled {
34 base_css + css! {"[popup_css] { visibility: visible; }"}
35 } else {
36 base_css
37 }
38 })
39 );
40
41 dom! {
42 <div css={container_css}>
43 <div css={popup_css + params.css}>
44 {content}
45 </div>
46 </div>
47 }
48}
49
50#[component]
51pub fn PopupOnHover(element: DomNode, content: DomNode, params: PopupParams) {
52 let popup_css = popup_css();
53
54 let operator_css = operator_css() + css! {":hover [popup_css] { visibility: visible; }"};
55
56 dom! {
57 <div css={operator_css}>
58 {element}
59 <div css={popup_css + params.css}>
60 {content}
61 </div>
62 </div>
63 }
64}