Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

Popover time!

stoolpresidente's profile picture

Dave Portnoy

3,857,335 subscribers

709,100 Aufrufe • vor 2 Tagen •via X (Twitter)

Essen
LIVE

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

Three levels of popover interaction design:
0:11

Three levels of popover interaction design:

joshpuckett

131,280 Aufrufe • vor 10 Monaten

Base UI Popover with the detached triggers API.
0:12

Base UI Popover with the detached triggers API.

Colm Tuite

45,846 Aufrufe • vor 5 Monaten

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

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

Dave Portnoy

181,501 Aufrufe • vor 3 Monaten

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→
0:13

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 Aufrufe • vor 11 Monaten

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">..</>
0:15

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 Aufrufe • vor 2 Jahren

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

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 Aufrufe • vor 1 Jahr

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; }
0:11

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 Aufrufe • vor 1 Jahr

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 🤩
0:12

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 Aufrufe • vor 2 Jahren

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!
0:16

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 Aufrufe • vor 4 Monaten

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 🤙
0:17

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 Aufrufe • vor 2 Jahren

*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.
0:15

*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 Aufrufe • vor 2 Jahren

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">
0:19

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 Aufrufe • vor 2 Jahren

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

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

池田 泰延

158,106 Aufrufe • vor 1 Jahr

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!
0:16

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 Aufrufe • vor 3 Monaten

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.
0:13

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 Aufrufe • vor 9 Monaten

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."
0:19

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 Aufrufe • vor 8 Monaten

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.
0:18

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 Aufrufe • vor 7 Monaten