Skip to content

Configurable open and close delay for popover #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ToxicMushroom merged 2 commits into from
Apr 16, 2026
+112 −81
Merged

Configurable open and close delay for popover #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b43c80a
feat: Configurable open and close delay for popover
ToxicMushroom Apr 10, 2026
b7e1251
feat: expand popover demo on open/close hover delay + some other prop…
ToxicMushroom Apr 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 21 additions & 2 deletions demo/src/demos/popover.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,27 +21,46 @@ use leptodon::layout::FixedCenterColumn;
use leptodon::paragraph::Paragraph;
use leptodon::popover::Popover;
use leptodon::popover::PopoverAnchor;
use leptodon::popover::PopoverController;
use leptodon::popover::PopoverTrigger;
use leptodon::util::callback::BoxCallback;
use leptodon::util::lorem::Lorem;
use leptodon_proc_macros::generate_codeblock;
use leptos::logging::log;
use leptos::prelude::ClassAttribute;
use leptos::prelude::ElementChild;
use leptos::{IntoView, component, view};
use leptos_meta::Title;
use std::time::Duration;

#[generate_codeblock(PopoverExample)]
#[component]
pub fn PopoverDemo() -> impl IntoView {
let popover_controller = PopoverController {
open: None,
close: None,
on_open: Some(BoxCallback::new(|| {
log!("Opening popover.");
})),
on_close: None,
};
view! {
<Popover preferred_pos=PopoverAnchor::Left>
<Popover
trigger_type=leptodon::popover::PopoverTriggerType::Click
preferred_pos=PopoverAnchor::Left>
<PopoverTrigger slot>
<Button>"L"</Button>
</PopoverTrigger>
<p>
<Lorem sentences=2/>
</p>
</Popover>
<Popover preferred_pos=PopoverAnchor::Top>
<Popover
hover_open_delay=Duration::from_millis(200)
hover_close_delay=Some(Duration::from_millis(200))
show_arrow=false
popover_controller=popover_controller
preferred_pos=PopoverAnchor::Top>
<PopoverTrigger slot>
<Button>"T"</Button>
</PopoverTrigger>
Expand Down
51 changes: 43 additions & 8 deletions leptodon/src/popover/mod.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,12 @@ pub fn Popover<Trigger, Content>(
trigger_type: PopoverTriggerType,
/// The element or component that triggers popover.
popover_trigger: PopoverTrigger<Trigger>,
/// Delay before opening on hover.
#[prop(optional, into)]
hover_open_delay: MaybeProp<Duration>,
/// Delay before closing after hover.
#[prop(default = Some(Duration::from_millis(100)))]
hover_close_delay: Option<Duration>,
/// Configures the position of the Popover.
#[prop(optional)]
preferred_pos: PopoverAnchor,
Expand All @@ -78,7 +84,11 @@ where
let trigger_ref: NodeRef<Element> = NodeRef::new();
let popover_ref: NodeRef<Div> = NodeRef::new();
let arrow_ref: NodeRef<Div> = NodeRef::new();

// Delays the opening of popover
let show_popover_handle = StoredValue::new(None::<TimeoutHandle>);
// Delays the closing of popover
let hide_popover_handle = StoredValue::new(None::<TimeoutHandle>);

let show_by_hover = RwSignal::new(false);
let popover_clicked_open = RwSignal::new(false);
Expand Down Expand Up @@ -169,12 +179,28 @@ where
if trigger_type != PopoverTriggerType::Hover {
return;
}
hide_popover_handle.update_value(|handle| {
if let Some(handle) = handle.take() {
handle.clear();
}
});
show_popover_handle.update_value(|handle| {
if let Some(handle) = handle.take() {
// Make sure previous popover mouse-enter timeouts are reset
handle.clear();
}
if let Some(hover_open_delay) = hover_open_delay.get() {
*handle = set_timeout_with_handle(
move || {
show_by_hover.set(true);
},
hover_open_delay,
)
.ok();
} else {
show_by_hover.set(true);
}
});
show_by_hover.set(true);
};

let on_mouse_leave = move |e| {
Expand All @@ -191,13 +217,22 @@ where
if let Some(handle) = handle.take() {
handle.clear();
}
*handle = set_timeout_with_handle(
move || {
show_by_hover.set(false);
},
Duration::from_millis(100),
)
.ok();
});
hide_popover_handle.update_value(|handle| {
if let Some(handle) = handle.take() {
handle.clear();
}
if let Some(hover_close_delay) = hover_close_delay {
*handle = set_timeout_with_handle(
move || {
show_by_hover.set(false);
},
hover_close_delay,
)
.ok();
} else {
show_by_hover.set(false);
}
});
};

Expand Down
2 changes: 1 addition & 1 deletion leptodon/src/select/mod.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,8 @@ use leptos::{
prelude::{MaybeProp, Signal},
view,
};
use std::fmt::Display;
use leptos_use::math::use_or;
use std::fmt::Display;
use std::hash::Hash;

use crate::class_list;
Expand Down
75 changes: 9 additions & 66 deletions overview/end2end/devenv.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,11 @@
"devenv": {
"locked": {
"dir": "src/modules",
"lastModified": 1774816935,
"lastModified": 1775803833,
"narHash": "sha256-mx/CJShwE4b5CyU106ls3Jiw9fK4kyPoTLmta/cV5iM=",
"owner": "cachix",
"repo": "devenv",
"rev": "a4cf85b989fff0bafe5858c879e5343493a86019",
"rev": "d4410df5bf2213111d3c7598b09e49176cd772d9",
"type": "github"
},
"original": {
Expand All @@ -16,68 +17,13 @@
"type": "github"
}
},
"flake-compat": {
"flake": false,
"locked": {
"lastModified": 1767039857,
"owner": "NixOS",
"repo": "flake-compat",
"rev": "5edf11c44bc78a0d334f6334cdaf7d60d732daab",
"type": "github"
},
"original": {
"owner": "NixOS",
"repo": "flake-compat",
"type": "github"
}
},
"git-hooks": {
"inputs": {
"flake-compat": "flake-compat",
"gitignore": "gitignore",
"nixpkgs": [
"nixpkgs"
]
},
"locked": {
"lastModified": 1774104215,
"owner": "cachix",
"repo": "git-hooks.nix",
"rev": "f799ae951fde0627157f40aec28dec27b22076d0",
"type": "github"
},
"original": {
"owner": "cachix",
"repo": "git-hooks.nix",
"type": "github"
}
},
"gitignore": {
"inputs": {
"nixpkgs": [
"git-hooks",
"nixpkgs"
]
},
"locked": {
"lastModified": 1762808025,
"owner": "hercules-ci",
"repo": "gitignore.nix",
"rev": "cb5e3fdca1de58ccbc3ef53de65bd372b48f567c",
"type": "github"
},
"original": {
"owner": "hercules-ci",
"repo": "gitignore.nix",
"type": "github"
}
},
"nixpkgs": {
"locked": {
"lastModified": 1774388614,
"lastModified": 1775595990,
"narHash": "sha256-OEf7YqhF9IjJFYZJyuhAypgU+VsRB5lD4DuiMws5Ltc=",
"owner": "NixOS",
"repo": "nixpkgs",
"rev": "1073dad219cb244572b74da2b20c7fe39cb3fa9e",
"rev": "4e92bbcdb030f3b4782be4751dc08e6b6cb6ccf2",
"type": "github"
},
"original": {
Expand All @@ -90,6 +36,7 @@
"nixpkgs-playwright": {
"locked": {
"lastModified": 1767406925,
"narHash": "sha256-7w1gVIVwwG/j8SxuffmXNyJPcUEpCDt1C5wazVTnWJQ=",
"owner": "NixOS",
"repo": "nixpkgs",
"rev": "145b67bd0bd4e075f981c1c2b81155d9e2982de2",
Expand All @@ -105,15 +52,11 @@
"root": {
"inputs": {
"devenv": "devenv",
"git-hooks": "git-hooks",
"nixpkgs": "nixpkgs",
"nixpkgs-playwright": "nixpkgs-playwright",
"pre-commit-hooks": [
"git-hooks"
]
"nixpkgs-playwright": "nixpkgs-playwright"
}
}
},
"root": "root",
"version": 7
}
}
42 changes: 38 additions & 4 deletions overview/style/output.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1496,14 +1496,22 @@ input:checked + .toggle-bg {
height: 100vh;
}

.max-h-\[50vh\] {
max-height: 50vh;
.max-h-\[70vh\] {
max-height: 70vh;
}

.max-h-\[95vh\] {
max-height: 95vh;
}

.max-h-full {
max-height: 100%;
}

.max-h-\[50vh\] {
max-height: 50vh;
}

.min-h-full {
min-height: 100%;
}
Expand Down Expand Up @@ -1613,8 +1621,8 @@ input:checked + .toggle-bg {
max-width: 42rem;
}

.max-w-\[40vw\] {
max-width: 40vw;
.max-w-\[80vw\] {
max-width: 80vw;
}

.max-w-screen-xl {
Expand All @@ -1625,6 +1633,10 @@ input:checked + .toggle-bg {
max-width: 24rem;
}

.max-w-\[40vw\] {
max-width: 40vw;
}

.flex-1 {
flex: 1 1 0%;
}
Expand Down Expand Up @@ -1750,6 +1762,16 @@ input:checked + .toggle-bg {
resize: both;
}

.scroll-py-1 {
scroll-padding-top: 0.25rem;
scroll-padding-bottom: 0.25rem;
}

.scroll-py-2 {
scroll-padding-top: 0.5rem;
scroll-padding-bottom: 0.5rem;
}

.appearance-none {
-webkit-appearance: none;
-moz-appearance: none;
Expand Down Expand Up @@ -3156,6 +3178,10 @@ html.dark {
margin-inline-end: 6rem;
}

.md\:max-w-\[60vw\] {
max-width: 60vw;
}

.md\:p-1 {
padding: 0.25rem;
}
Expand Down Expand Up @@ -3207,10 +3233,18 @@ html.dark {
display: none;
}

.lg\:max-h-\[50vh\] {
max-height: 50vh;
}

.lg\:w-\[770px\] {
width: 770px;
}

.lg\:max-w-\[40vw\] {
max-width: 40vw;
}

.lg\:translate-x-0 {
--tw-translate-x: 0px;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
Expand Down