正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

Popover time!

Dave Portnoy

3,857,335 subscribers

709,100 次观看 • 2 天前 •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

原始帖子的评论将显示在这里

相关视频

Three levels of popover interaction design:

Three levels of popover interaction design:

joshpuckett

131,280 次观看 • 10 个月前

Base UI Popover with the detached triggers API.

Base UI Popover with the detached triggers API.

Colm Tuite

45,846 次观看 • 5 个月前

Drake Graye (front) and Mr Popover (back) stretching their legs this morning at #saratoga

Drake Graye (front) and Mr Popover (back) stretching their legs this morning at #saratoga

Dave Portnoy

181,501 次观看 • 3 个月前

The Popover API puts your UI on a separate top layer so you can stop fighting with focus management. Plus backdrop styling so short it fits here: [popover]::backdrop { background: rgb(52, 168, 83); backdrop-filter: blur(3px); } Build more with less code→

The Popover API puts your UI on a separate top layer so you can stop fighting with focus management. Plus backdrop styling so short it fits here: [popover]::backdrop { background: rgb(52, 168, 83); backdrop-filter: blur(3px); } Build more with less code→

Chrome for Developers

41,361 次观看 • 11 个月前

No-JS hamburger menu w/the popover API: Browser handles: - clicks on hamburger & close btns - esc key to exit - tab nav - spacebar + enter key toggle (open & close) - light dismiss (click away) close How: <btn popovertarget="menu">..</> <div popover role="menu" id="menu">..</>

No-JS hamburger menu w/the popover API: Browser handles: - clicks on hamburger & close btns - esc key to exit - tab nav - spacebar + enter key toggle (open & close) - light dismiss (click away) close How: <btn popovertarget="menu">..</> <div popover role="menu" id="menu">..</>

Una 🇺🇦

379,766 次观看 • 2 年前

HTML y CSS para crear un menú lateral animado usando la API de popover y la regla CSS starting-style. Sin JavaScript.

HTML y CSS para crear un menú lateral animado usando la API de popover y la regla CSS starting-style. Sin JavaScript.

Miguel Ángel Durán

20,274 次观看 • 1 年前

details 🤌 :hover intention + safety triangles 🦺 .triangle { pointer-events: none; } .toggle:hover .triangle { pointer-events: all; } .toggle:has(+ :popover-open) .triangle { scale: 0; } .toggle:is(:hover, :focus-visible) + aside { translate: 0 0; }

details 🤌 :hover intention + safety triangles 🦺 .triangle { pointer-events: none; } .toggle:hover .triangle { pointer-events: all; } .toggle:has(+ :popover-open) .triangle { scale: 0; } .toggle:is(:hover, :focus-visible) + aside { translate: 0 0; }

jhey ʕ•ᴥ•ʔ

136,439 次观看 • 1 年前

A new combobox component is coming to Dub.co soon: ◆ Keyboard-friendly ◆ Blazing fast ◆ Smooth height-aware morphing ◆ Multi/single-select support Built with CMDK + Radix by WorkOS Popover by the 🐐 Tim Wilson and it will be fully open-source 🤩

A new combobox component is coming to Dub.co soon: ◆ Keyboard-friendly ◆ Blazing fast ◆ Smooth height-aware morphing ◆ Multi/single-select support Built with CMDK + Radix by WorkOS Popover by the 🐐 Tim Wilson and it will be fully open-source 🤩

Steven Tey

35,297 次观看 • 2 年前

React Aria Components v1.19.0 is out! ✨ Autocomplete now supports inline completions (e.g. mentions), and a new Popover API enables positioning relative to the cursor. Also, text inputs can now be nested inside GridList and Tree without interfering with arrow key navigation!

React Aria Components v1.19.0 is out! ✨ Autocomplete now supports inline completions (e.g. mentions), and a new Popover API enables positioning relative to the cursor. Also, text inputs can now be nested inside GridList and Tree without interfering with arrow key navigation!

Devon Govett

19,358 次观看 • 4 个月前

kinda wild how far you can get with CSS alone a scroll animation tied to the content scroll powers the percentage update + icon animation interpolate-size provides a way to transition the popover between button size and content size using starting-style 🤙

kinda wild how far you can get with CSS alone a scroll animation tied to the content scroll powers the percentage update + icon animation interpolate-size provides a way to transition the popover between button size and content size using starting-style 🤙

jhey ʕ•ᴥ•ʔ

121,066 次观看 • 2 年前

*You can make popup modals with 2 lines of HTML* Yesterday, Firefox 🔥 125 came out. This means all major browsers now support all the fantastic features of popover, which means an entire class of JavaScript libraries (and I suspect about 10% of @GitHub) is now fully obsolete.

You can make popup modals with 2 lines of HTML Yesterday, Firefox 🔥 125 came out. This means all major browsers now support all the fantastic features of popover, which means an entire class of JavaScript libraries (and I suspect about 10% of @GitHub) is now fully obsolete.

Joost de Valk

221,166 次观看 • 2 年前

CSS is mind-blowing 🤯 Browser does what it can to keep the menus in view. Even when you scroll. Zero JavaScript (Aside from the Draggable part) This is the important HTML 👇 (anchor) <button id="trigger" popovertarget="menu"> <div popover="auto" id="menu" anchor="trigger">

CSS is mind-blowing 🤯 Browser does what it can to keep the menus in view. Even when you scroll. Zero JavaScript (Aside from the Draggable part) This is the important HTML 👇 (anchor) <button id="trigger" popovertarget="menu"> <div popover="auto" id="menu" anchor="trigger">

jhey ʕ•ᴥ•ʔ

307,621 次观看 • 2 年前

HTMLの新しいpopover="hint"属性を使うと、ツールチップのフキダシ💭を簡単かつ丁寧に作れます。 HTML + CSS + JSのポップオーバーは便利なので、ぜひ覚えたい機能です。

HTMLの新しいpopover="hint"属性を使うと、ツールチップのフキダシ💭を簡単かつ丁寧に作れます。 HTML + CSS + JSのポップオーバーは便利なので、ぜひ覚えたい機能です。

池田泰延

158,106 次观看 • 1 年前

Fixed this small bug in Linear’s app today which I often see in other apps as well. Here’s a small before/after. The issue: When you open a popover inside a modal (think a custom select), clicking outside the popover to close it also closes the modal. The desired behavior is to close the select on click outside while keeping the modal open. This often happens because custom dropdowns or select components are rendered in a portal. The modal then treats the interaction as an outside click because, technically, the dropdown isn’t inside the modal in the DOM, it’s rendered elsewhere via a portal. The fix depends on your setup, whether it’s Radix/Base UI, fully custom etc. But since you now know the cause of it, you can ask your agent to fix it for you!

Fixed this small bug in Linear’s app today which I often see in other apps as well. Here’s a small before/after. The issue: When you open a popover inside a modal (think a custom select), clicking outside the popover to close it also closes the modal. The desired behavior is to close the select on click outside while keeping the modal open. This often happens because custom dropdowns or select components are rendered in a portal. The modal then treats the interaction as an outside click because, technically, the dropdown isn’t inside the modal in the DOM, it’s rendered elsewhere via a portal. The fix depends on your setup, whether it’s Radix/Base UI, fully custom etc. But since you now know the cause of it, you can ask your agent to fix it for you!

Emil Kowalski

89,488 次观看 • 3 个月前

Good software is durable. Here's an quick example of what that means, at an interface level. In X, you can choose a custom emoji reaction. The popover looks like what I expect, but it does not work like I expect. I want to use the ‼ emoji, so the first thing I try is obviously '!'. No results. The sum of a million little papercuts like this means X feels like broken software, not well designed or made. Which is a shame, because it's a brilliant product and network.

Good software is durable. Here's an quick example of what that means, at an interface level. In X, you can choose a custom emoji reaction. The popover looks like what I expect, but it does not work like I expect. I want to use the ‼ emoji, so the first thing I try is obviously '!'. No results. The sum of a million little papercuts like this means X feels like broken software, not well designed or made. Which is a shame, because it's a brilliant product and network.

joshpuckett

55,420 次观看 • 9 个月前

Un problema clásico al vibecodear es que uno no sabe una mierda (es la verdad, lo siento), uno dice "hazme un modal” en vez de usar el nombre real del componente (el nombre se lo saben los devs fastidiosos, nosotros no). Pero weno, mejoremos eso, a partir de hoy, hazlo así: - Entra a - Busca el componente que necesitas (Sheet, Command, DropdownMenu, DataTable, Popover, etc.) - Copia el nombre EXACTO. - Luego pegas directo a Claude: “Agrega el componente [insertar componente] en [x parte].” Resultado: Claudinho: "AHHH FDP AGORA SIM ENTENDO."

Un problema clásico al vibecodear es que uno no sabe una mierda (es la verdad, lo siento), uno dice "hazme un modal” en vez de usar el nombre real del componente (el nombre se lo saben los devs fastidiosos, nosotros no). Pero weno, mejoremos eso, a partir de hoy, hazlo así: - Entra a - Busca el componente que necesitas (Sheet, Command, DropdownMenu, DataTable, Popover, etc.) - Copia el nombre EXACTO. - Luego pegas directo a Claude: “Agrega el componente [insertar componente] en [x parte].” Resultado: Claudinho: "AHHH FDP AGORA SIM ENTENDO."

Erick

78,494 次观看 • 8 个月前

Software Factory — v0.30.0 Release Date: 3/23/2026 Major Features • Notification System: In-app and email notifications for @mentions, comment replies, work order assignments, and flagged content. Notification bell with unread badge, type/project filtering, mark-as-read, and deep-link navigation. Minor Updates • Project Selector Relocated: Project selector moved from top nav bar into the sidebar in Project Overview console for cleaner navigation. • Link Existing Child Work Orders: In Planner detail, link existing work orders as children with searchable infinite-scroll dropdown and cycle prevention. • Intelligent Paste: Improved paste heuristics — automatic markdown/code classification, IDE-aware detection, and raw in-place insertion inside code blocks. • Roadmap Improvements: Hover-to-add-phase now works in all grouping modes (status, assignee, blueprint); clickable group headers for expand/collapse with persisted state; "No Phase" group sorted last. • Work Order Filter Persistence: Filter search text persists when closing and reopening the filter popover. • Getting Started Skill: Improved the blueprint onboarding experience with an agent-guided flow for getting started.

Software Factory — v0.30.0 Release Date: 3/23/2026 Major Features • Notification System: In-app and email notifications for @mentions, comment replies, work order assignments, and flagged content. Notification bell with unread badge, type/project filtering, mark-as-read, and deep-link navigation. Minor Updates • Project Selector Relocated: Project selector moved from top nav bar into the sidebar in Project Overview console for cleaner navigation. • Link Existing Child Work Orders: In Planner detail, link existing work orders as children with searchable infinite-scroll dropdown and cycle prevention. • Intelligent Paste: Improved paste heuristics — automatic markdown/code classification, IDE-aware detection, and raw in-place insertion inside code blocks. • Roadmap Improvements: Hover-to-add-phase now works in all grouping modes (status, assignee, blueprint); clickable group headers for expand/collapse with persisted state; "No Phase" group sorted last. • Work Order Filter Persistence: Filter search text persists when closing and reopening the filter popover. • Getting Started Skill: Improved the blueprint onboarding experience with an agent-guided flow for getting started.

8090

64,337 次观看 • 7 个月前