{"id":5759,"date":"2025-05-02T09:21:38","date_gmt":"2025-05-02T14:21:38","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=5759"},"modified":"2025-05-02T09:21:39","modified_gmt":"2025-05-02T14:21:39","slug":"inset-auto-for-popovers","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/inset-auto-for-popovers\/","title":{"rendered":"inset: auto; for popovers"},"content":{"rendered":"\n<figure class=\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"embed-twitter\"><blockquote class=\"twitter-tweet\" data-width=\"500\" data-dnt=\"true\"><p lang=\"en\" dir=\"ltr\">\ud83d\udea8 PSA \ud83d\udea8<br><br>Anchored popover issues?<br><br>I recommend you just add this to your reset.css:<br><br>[popover] {<br>  inset: auto;<br>}<br><br>Just trust me.<br><br>User agent default styles for popover mimics dialog, and they get positioned in the middle of your screen like a modal. So if you&#39;re anchoring the\u2026<\/p>&mdash; Una \ud83c\uddfa\ud83c\udde6 (@Una) <a href=\"https:\/\/twitter.com\/Una\/status\/1917662266427859202?ref_src=twsrc%5Etfw\">April 30, 2025<\/a><\/blockquote><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/div>\n<\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[29],"tags":[7,332,120],"class_list":["post-5759","post","type-post","status-publish","format-standard","hentry","category-the-beat","tag-css","tag-inset","tag-popover"],"acf":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/5759","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=5759"}],"version-history":[{"count":1,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/5759\/revisions"}],"predecessor-version":[{"id":5760,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/5759\/revisions\/5760"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=5759"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=5759"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=5759"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}