#popover — Public Fediverse posts

#Development #Techniques
Link + popover navigation · Using HTML ‘popover’ instead of disclosure widgets https://ilo.im/16ef1w

_____
#Navigation #Popover #Links #Accessibility #WebDev #Frontend #HTML #ARIA

#Development #Techniques
Link + popover navigation · Using HTML ‘popover’ instead of disclosure widgets https://ilo.im/16ef1w

_____
#Navigation #Popover #Links #Accessibility #WebDev #Frontend #HTML #ARIA

De la complexité d'animer les *modals* (comme `dialog`, `popover`) avec CSS.

🔗 https://frontendmasters.com/blog/in-n-out-animations-dialogs-part-1-3/

#CSS #modal #popover #animation

[Перевод] 10 веб-API, заменяющих многие библиотеки JavaScript

Современные браузеры тихо съедают экосистему JavaScript живьем. За последние несколько лет основные браузеры выпустили нативные веб-API, которые заменяют удивительно большое количество утилит, которые мы до сих пор устанавливаем по привычке. Тем не менее, многие разработчики продолжают использовать уже ненужные, но привычные библиотеки. Если зависимость всегда работала, она остается в стеке, даже если браузер уже умеет выполнять ту же работу. Такой подход обходится дороже, чем кажется. Каждый дополнительный пакет увеличивает вес сборки, затраты на обслуживание, частоту обновления версий и риск отказа от проекта в долгосрочной перспективе. Нативные API-интерфейсы стоят пользователям 0 КБ данных, работают глубоко в движке (часто вне основного потока (main thread)) и используют оптимизации, недоступные библиотекам.

https://habr.com/ru/articles/1015134/

#javascript #js #webapi #fetch #formdata #url #popover #clipboard #resizeobserver #viewtransitions

#Development #Techniques
Building dynamic toggletips · A prime example for anchored container queries https://ilo.im/16bc8d

_____
#ModernCSS #AnchorPositioning #ContainerQueries #Toggletips #Popover #ProgressiveEnhancement #WebDev #Frontend #CSS

#Development #Techniques
Building dynamic toggletips · A prime example for anchored container queries https://ilo.im/16bc8d

_____
#ModernCSS #AnchorPositioning #ContainerQueries #Toggletips #Popover #ProgressiveEnhancement #WebDev #Frontend #CSS

Getting Started With The Popover API — Smashing Magazine

https://misryoum.com/us/reviews/getting-started-with-the-popover-api-smashing-magazine/

What happens if you rebuild a single tooltip using the browser’s native model without the aid of a library? The Popover API turns tooltips from something you simulate into something the browser actually understands. Opening and closing, keyboard interaction, Escape...

#Getting #Started #With #The #Popover #API #Smashing #Magazine #US_News_Hub #misryoum_com

🎉 Getting Started With The Popover API

https://smashingmagazine.com/2026/03/getting-started-popover-api/

#web #www #popover #javascript #html #programming #software #ux #ui

🎉 Getting Started With The Popover API

https://smashingmagazine.com/2026/03/getting-started-popover-api/

#web #www #popover #javascript #html #programming #software #ux #ui

I’m certain this will become a good reference for the future #css #html #popover #dialog
https://css-tricks.com/popover-api-or-dialog-api-which-to-choose/

#Development #Comparisons
Popover API vs. Dialog API · “They seem to do the same job, but they don’t!” https://ilo.im/16b207

_____
#Popover #HtmlDialog #Accessibility #ARIA #Invokers #APIs #WebDev #Frontend #HTML #JavaScript

#Development #Comparisons
Popover API vs. Dialog API · “They seem to do the same job, but they don’t!” https://ilo.im/16b207

_____
#Popover #HtmlDialog #Accessibility #ARIA #Invokers #APIs #WebDev #Frontend #HTML #JavaScript

JavaScript: заметка о свойствах source ToggleEvent и closedBy HTMLDialogElement

Привет, друзья! В этой небольшой статье я расскажу вам о новом свойстве события toggle - source , а также о новом атрибуте HTML-элемента dialog - closedby . Свойство source позволяет определять источник переключения видимости поповера (popover), а атрибут closedby позволяет декларативно управлять логикой закрытия dialog , но обо всем по порядку.

https://habr.com/ru/companies/timeweb/articles/984310/

#javascript #js #source #closedby #dialog #button #timeweb_статьи #popover #light_dismiss

Anchored Menus and a Lesson in Scoping

https://web.brid.gy/r/https://frontendmasters.com/blog/anchored-menus-and-a-lesson-in-scoping/

Anchored Menus and a Lesson in Scoping

https://web.brid.gy/r/https://frontendmasters.com/blog/anchored-menus-and-a-lesson-in-scoping/

Контекстные меню с popover и anchor positioning. Крис Койер показывает, как сделать кебаб-меню без JavaScript через HTML-инвокеры для popover, anchor-name и position-anchor, а также анимацию открытия и закрытия на CSS. А ещё умное позиционирование с помощью свойства position-try, чтобы меню всегда оставалось видимым. #css #popover

https://frontendmasters.com/blog/popover-context-menus-with-anchor-positioning/

Контекстные меню с popover и anchor positioning. Крис Койер показывает, как сделать кебаб-меню без JavaScript через HTML-инвокеры для popover, anchor-name и position-anchor, а также анимацию открытия и закрытия на CSS. А ещё умное позиционирование с помощью свойства position-try, чтобы меню всегда оставалось видимым. #css #popover

https://frontendmasters.com/blog/popover-context-menus-with-anchor-positioning/

#Development #Techniques
Better defaults for popovers · A small anchor-repositioning with a big effect https://ilo.im/169wki

_____
#ModernCSS #Popover #Buttons #AnchorPositioning #HtmlDialog #ProgressiveEnhancement #WebDev #Frontend #CSS

#Development #Techniques
Better defaults for popovers · A small anchor-repositioning with a big effect https://ilo.im/169wki

_____
#ModernCSS #Popover #Buttons #AnchorPositioning #HtmlDialog #ProgressiveEnhancement #WebDev #Frontend #CSS

JavaScript: заметка об Invoker Commands API

Привет, друзья! В этой небольшой статье я хочу рассказать вам о новом Web API - Invoker Commands . Invoker Commands API позволяет декларативно управлять поведением некоторых интерактивных элементов с помощью кнопок. "Декларативно" означает, что управления элементами осуществляется только с помощью HTML, без JavaScript. На сегодняшний день этот API поддерживается всеми основными браузерами (в Safari пока только в качестве экспериментальной возможности).

https://habr.com/ru/companies/timeweb/articles/972668/

#invoker_commands_api #html #web_api #dialog #popover #command #commandfor #диалог #поповер #timeweb_статьи_перевод

Today I learned about Yorkshire Pudding - and I've decided I need to try my hand at making them.

This recipe seems to be an exhaustive examination of the different myths and factors that surround the famous popover accomplice to decadent Prime Rib...

https://www.seriouseats.com/the-best-yorkshire-pudding-popover-recipe

#popover #yorkshire #beef #recipe

Today I learned about Yorkshire Pudding - and I've decided I need to try my hand at making them.

This recipe seems to be an exhaustive examination of the different myths and factors that surround the famous popover accomplice to decadent Prime Rib...

https://www.seriouseats.com/the-best-yorkshire-pudding-popover-recipe

#popover #yorkshire #beef #recipe

Attention aux conflits potentiels en HTML entre modale native et popover natif.

🔗 https://htmhell.dev/adventcalendar/2025/1/

#HTML #modal #popover

#Development #Guides
Baseline layered UI patterns · What you can do with HTML ‘dialog’ and ‘popover’ today https://ilo.im/168qp1

_____
#Popover #Dialog #Invoker #Animation #Accessibility #Browser #WebDev #Frontend #HTML #CSS

#Development #Guides
Baseline layered UI patterns · What you can do with HTML ‘dialog’ and ‘popover’ today https://ilo.im/168qp1

_____
#Popover #Dialog #Invoker #Animation #Accessibility #Browser #WebDev #Frontend #HTML #CSS

yes indeed - this is no option at all: „Not showing it on mobile devices is one of the options - I am completely against that idea“ #popover #mobile #a11y

discussion about important content in popovers is useless. who will define if content is „important“ enough to show on mobile?
https://utilitybend.com/blog/html-popovers-shown-on-interest-should-be-accessible-on-mobile-devices/

And another one, the HTML validator does indeed now also support the `popoper*` attributes.

(I wonder if I slowly turn into a maintainer…)

https://validator.w3.org/

#html #popover

And another one, the HTML validator does indeed now also support the `popoper*` attributes.

(I wonder if I slowly turn into a maintainer…)

https://validator.w3.org/

#html #popover

#Development #Explorations
A first look at the Interest Invoker API · Playing around with hover-triggered popovers https://ilo.im/165lbk

_____
#Tooltips #Popover #Invoker #API #Chrome #Browser #WebDev #Frontend #HTML #CSS

#Development #Explorations
A first look at the Interest Invoker API · Playing around with hover-triggered popovers https://ilo.im/165lbk

_____
#Tooltips #Popover #Invoker #API #Chrome #Browser #WebDev #Frontend #HTML #CSS

#Development #Guides
What is HTML popover=hint? · Its function and relation to interest invokers https://ilo.im/1657qt

_____
#ModernCSS #Popover #Invokers #Tooltips #Chrome #Browser #WebDev #Frontend #CSS

#Development #Guides
What is HTML popover=hint? · Its function and relation to interest invokers https://ilo.im/1657qt

_____
#ModernCSS #Popover #Invokers #Tooltips #Chrome #Browser #WebDev #Frontend #CSS

The #popover #api is now baseline and will make #accessible #megamenus easier
#backwardcompatibility issue:

if (!('Popover' in window)) {

load old script
}

Has anyone ever tried this? I am worried about the time delay and ask myself if I should just wait a while ....

#Development #Approaches
Glossary web component · A slick way to add links and context to your content https://ilo.im/163pvz

_____
#Glossary #Content #Markdown #JSON #Popover #WebComponent #WebDev #Frontend #HTML #JavaScript

#Development #Approaches
Glossary web component · A slick way to add links and context to your content https://ilo.im/163pvz

_____
#Glossary #Content #Markdown #JSON #Popover #WebComponent #WebDev #Frontend #HTML #JavaScript

#Development #Misconceptions
Popping preconceived popover ponderings · Demystifying the HTML ‘popover’ attribute https://ilo.im/162th4

_____
#Accessibility #Popover #Dialog #Modal #Browser #WebDev #Frontend #HTML #ARIA

#Development #Misconceptions
Popping preconceived popover ponderings · Demystifying the HTML ‘popover’ attribute https://ilo.im/162th4

_____
#Accessibility #Popover #Dialog #Modal #Browser #WebDev #Frontend #HTML #ARIA

#Development #Introductions
HTML ‘command’ and ‘commandfor’ · The new attributes for the HTML ‘button’ element https://ilo.im/162kp7

_____
#Buttons #Dialog #Popover #WebDev #Frontend #HTML #JavaScript

#Development #Introductions
HTML ‘command’ and ‘commandfor’ · The new attributes for the HTML ‘button’ element https://ilo.im/162kp7

_____
#Buttons #Dialog #Popover #WebDev #Frontend #HTML #JavaScript

#Development #Previews
The web needs anchored popovers · An ideal choice for almost every ‘menu’ and ‘tooltip’ https://ilo.im/162jsf

_____
#ModernCSS #Menus #Tooltips #Popover #AnchorPositioning #Browser #WebDev #Frontend #HTML #CSS

#Development #Previews
The web needs anchored popovers · An ideal choice for almost every ‘menu’ and ‘tooltip’ https://ilo.im/162jsf

_____
#ModernCSS #Menus #Tooltips #Popover #AnchorPositioning #Browser #WebDev #Frontend #HTML #CSS

I am looking for a lightweight #ui #compontent library for #react #nextjs , ideally compatible with #tailwind #tailwindcss only with basic components like #dropdown #dialog #modal #popover #button #checkbox
any tips?

I am looking for a lightweight #ui #compontent library for #react #nextjs , ideally compatible with #tailwind #tailwindcss only with basic components like #dropdown #dialog #modal #popover #button #checkbox
any tips?

Artículo acerca de anchor positioning para posicionar elementos como dropdowns dentro del viewport y que no se salgan con css.
Tether elements to each other with CSS anchor positioning  |  Blog  |  Chrome for Developers.
https://developer.chrome.com/blog/tether-elements-to-each-other-with-css-anchor-positioning ·
#css #dropdown #popover #positioning #scroll

Artículo acerca de popover API en html para hacer tooltips o dropdowns sólo con html y también con js sencillo.
Future of CSS: Popover API - DEV Community.
https://dev.to/link2twenty/future-of-css-popover-api-3ba0
##html #css #dropdown #modal #popover #tooltip #article

@pepelsbey are you in Open UI Discord? I asked in the #popover channel, turns out your example only does what you'd expect by coincidence, actual automagic positioning may still come but is complicated (thanks @kizu for pointing that out)

The #HTML #popover API is really thrilling.
We can combine it with <a> for the browser history but also with labels for inputs _inside the popover_ like

<button popovertarget={authId}><label for={signinId}><Icon type="login" /><br />Sign In</label></button>

And the popover will be opened and the tab "Sign In" opened at the same time.

/ @kubikpixel

Heute bin ich auf der #unkonf in Mannheim, veranstaltet von @bitexpert .

In den letzten Jahren waren dort wenige Frontend-Entwickler. Ein guter Grund einmal wichtige Neuerungen im Frontend der letzten Jahre zu zeigen.

Ich hoffe, ich schaffe alle Themen.

https://grochtdreis.de/vortraege/neues-frontend-2024/index.html#/

@unKonf

#frontend #DialogElement #popover #selektoren #customproperties

#Development #Comparisons
HTML dialog element vs. popovers · A look at their similarities, differences, and use cases https://ilo.im/1609qs

_____
#DialogElement #Popover #Modal #Accessibility #Browser #WebDev #Frontend #HTML #CSS #JavaScript