{"type":"blog","content":"\n

If you set popover=manual attribute on the popover trigger element (like the button that opens a popover), you can have multiple popover elements open at the same time.

Demo/Codepen:

\n\n","frontmatter":{"short":"use popover=manual to show multiple popovers at a time"},"title":"Multiple popovers with Popover API","description":"If you set [`popover=manual`](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API/Using#using_manual_popover_state) attribute on the [popover](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) trigger element (like the button that opens a popover), you can have multiple popover elements open at the same time.\r","category":"blog","tags":["CSS","HTML"],"slug":"multiple-popovers-with-popover-api","date":"2024-05-28T09:05:14.000Z","readingTime":"1 minute","ghMetadata":{"issueUrl":"https://github.com/mgrubinger/blog/issues/43","commentsUrl":"https://api.github.com/repos/mgrubinger/blog/issues/43/comments","title":"Multiple popovers with Popover API","created_at":"2024-05-28T09:05:14Z","updated_at":"2024-05-28T09:05:48Z","reactions":{"url":"https://api.github.com/repos/mgrubinger/blog/issues/43/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0},"user":{"login":"mgrubinger","id":465547,"node_id":"MDQ6VXNlcjQ2NTU0Nw==","avatar_url":"https://avatars.githubusercontent.com/u/465547?v=4","gravatar_id":"","url":"https://api.github.com/users/mgrubinger","html_url":"https://github.com/mgrubinger","followers_url":"https://api.github.com/users/mgrubinger/followers","following_url":"https://api.github.com/users/mgrubinger/following{/other_user}","gists_url":"https://api.github.com/users/mgrubinger/gists{/gist_id}","starred_url":"https://api.github.com/users/mgrubinger/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mgrubinger/subscriptions","organizations_url":"https://api.github.com/users/mgrubinger/orgs","repos_url":"https://api.github.com/users/mgrubinger/repos","events_url":"https://api.github.com/users/mgrubinger/events{/privacy}","received_events_url":"https://api.github.com/users/mgrubinger/received_events","type":"User","user_view_type":"public","site_admin":false}}}