{"id":200,"date":"2026-10-14T15:33:54","date_gmt":"2026-10-14T15:33:54","guid":{"rendered":"https:\/\/devdojo.co.in\/?p=200"},"modified":"2026-10-14T15:33:54","modified_gmt":"2026-10-14T15:33:54","slug":"css-anchor-positioning","status":"publish","type":"post","link":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/14\/css-anchor-positioning\/","title":{"rendered":"CSS Anchor Positioning Tutorial: Tooltips and Menus Without JavaScript"},"content":{"rendered":"\n<div class=\"dd-post\">\n<style>\n.single article:has(.dd-hero) .entry-media{display:none}\n.dd-post{--navy:#0b1020;--blue:#3178c6;--violet:#7c5cff;--ink:#1f2433;--muted:#5b6275;--line:#e3e6ef;font-size:17px;line-height:1.75;color:var(--ink)}\n.dd-post h2{margin:2.2em 0 .6em;font-size:1.6em;line-height:1.3;scroll-margin-top:90px}\n.dd-post h3{margin:1.6em 0 .5em;font-size:1.22em;scroll-margin-top:90px}\n.dd-post a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}\n.dd-post pre{background:#0f1430;color:#e6e9f5;padding:18px 20px;border-radius:12px;overflow-x:auto;line-height:1.6;border:1px solid #232a52;margin:1.2em 0;font-size:14.5px !important}\n.dd-post pre code{font-size:1em !important;background:none;color:inherit;padding:0;font-family:\"JetBrains Mono\",\"Fira Code\",Consolas,Menlo,monospace;white-space:pre}\n.dd-post :not(pre)>code{background:#eef1fb;color:#2b3a8f;padding:2px 6px;border-radius:5px;font-size:.9em}\n.dd-post .dd-hero{margin:0 0 1.6em;border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(11,16,32,.25)}\n.dd-post .dd-hero svg{display:block;width:100%;height:auto}\n.dd-post .dd-hero .node{transition:transform .25s,filter .25s;transform-box:fill-box;transform-origin:center;cursor:pointer}\n.dd-post .dd-hero .node:hover{transform:scale(1.08);filter:drop-shadow(0 0 10px #7c5cff)}\n.dd-post .dd-summary{background:linear-gradient(135deg,#eef3ff,#f4efff);border:1px solid #d6dcf5;border-left:5px solid var(--violet);border-radius:12px;padding:18px 22px;margin:1.4em 0}\n.dd-post .dd-summary strong.lbl{display:block;font-size:1.05em;margin-bottom:6px;color:#3a2fa0}\n.dd-post .dd-summary ul{margin:.3em 0 0 1.1em}\n.dd-post .dd-toc{background:#f8f9fc;border:1px solid var(--line);border-radius:12px;padding:16px 22px;margin:1.4em 0}\n.dd-post .dd-toc ol{margin:.4em 0 0 1.2em;columns:2;column-gap:28px}\n.dd-post .dd-toc li{break-inside:avoid;margin:.15em 0}\n@media(max-width:640px){.dd-post .dd-toc ol{columns:1}}\n.dd-post .dd-tip,.dd-post .dd-note,.dd-post .dd-warn{border-radius:10px;padding:14px 18px;margin:1.3em 0}\n.dd-post .dd-tip{background:#ecfbf3;border-left:4px solid #1f9d61}\n.dd-post .dd-note{background:#eef4ff;border-left:4px solid var(--blue)}\n.dd-post .dd-warn{background:#fff6e8;border-left:4px solid #e08a00}\n.dd-post .dd-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin:1.3em 0}\n.dd-post .dd-card{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:#fff;box-shadow:0 2px 8px rgba(20,30,70,.05)}\n.dd-post .dd-card b{display:block;color:#3a2fa0;margin-bottom:4px}\n.dd-post table{width:100%;border-collapse:collapse;margin:1.3em 0;font-size:.95em}\n.dd-post th,.dd-post td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}\n.dd-post th{background:#151b3b;color:#fff}\n.dd-post tr:nth-child(even) td{background:#f8f9fc}\n.dd-post .dd-tablewrap{overflow-x:auto}\n.dd-post figure{margin:1.6em 0;text-align:center}\n.dd-post figure svg{width:100%;height:auto;border-radius:12px}\n.dd-post figcaption{font-size:.9em;color:var(--muted);margin-top:8px}\n.dd-post details{border:1px solid var(--line);border-radius:10px;padding:12px 16px;margin:.7em 0;background:#fff}\n.dd-post details summary{cursor:pointer;font-weight:600}\n.dd-post details[open] summary{margin-bottom:8px;color:#3a2fa0}\n.dd-post .dd-tabs{border:1px solid var(--line);border-radius:12px;padding:6px 14px 16px;margin:1.4em 0;background:#fbfbfe}\n.dd-post .dd-tabs input{position:absolute;opacity:0;pointer-events:none}\n.dd-post .dd-tabs label{display:inline-block;padding:8px 14px;margin:8px 6px 0 0;border-radius:999px;border:1px solid #cfd5ea;cursor:pointer;font-weight:600;font-size:.95em;background:#fff}\n.dd-post .dd-tabs .panel{display:none;margin-top:14px}\n.dd-post .dd-tabs #pa1:checked~.labels label[for=pa1],.dd-post .dd-tabs #pa2:checked~.labels label[for=pa2],.dd-post .dd-tabs #pa3:checked~.labels label[for=pa3],.dd-post .dd-tabs #pa4:checked~.labels label[for=pa4],.dd-post .dd-tabs #pa5:checked~.labels label[for=pa5]{background:var(--violet);color:#fff;border-color:var(--violet)}\n.dd-post .dd-tabs #pa1:checked~.p1,.dd-post .dd-tabs #pa2:checked~.p2,.dd-post .dd-tabs #pa3:checked~.p3,.dd-post .dd-tabs #pa4:checked~.p4,.dd-post .dd-tabs #pa5:checked~.p5{display:flex}\n.dd-post .dd-tabs .panel{gap:20px;align-items:center;flex-wrap:wrap}\n.dd-post .pa-grid{display:grid;grid-template-columns:repeat(3,64px);grid-template-rows:repeat(3,44px);gap:4px;flex:none}\n.dd-post .pa-grid span{border:1px dashed #b9c1e0;border-radius:6px;background:#fff}\n.dd-post .pa-grid span.a{background:#151b3b;border:2px solid #3178c6;color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center;font-weight:700}\n.dd-post .pa-grid span.on{background:linear-gradient(135deg,#3178c6,#7c5cff);border:0}\n.dd-post .pa-text{flex:1;min-width:220px}\n.dd-post .pa-text code{font-size:.95em}\n.dd-post .dd-cta{background:linear-gradient(135deg,#0b1020,#151b3b);color:#e8ebff;border-radius:16px;padding:24px 26px;margin:2em 0;text-align:center}\n.dd-post .dd-cta h3{color:#fff;margin-top:0}\n.dd-post .dd-cta a{color:#a99bff}\n<\/style>\n<div class=\"dd-hero\"><svg viewBox=\"0 0 1200 520\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" role=\"img\" aria-labelledby=\"ddh-t ddh-d\">\n<title id=\"ddh-t\">CSS Anchor Positioning Tutorial<\/title>\n<desc id=\"ddh-d\">Animated banner: a button acts as an anchor, and a tooltip, a dropdown menu and a side card are attached to it with CSS only.<\/desc>\n<defs>\n<linearGradient id=\"ddh-bg\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\"><stop offset=\"0\" stop-color=\"#0b1020\"\/><stop offset=\"1\" stop-color=\"#151b3b\"\/><\/linearGradient>\n<linearGradient id=\"ddh-ac\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"0\"><stop offset=\"0\" stop-color=\"#3178c6\"\/><stop offset=\"1\" stop-color=\"#7c5cff\"\/><\/linearGradient>\n<radialGradient id=\"ddh-glow\" cx=\".5\" cy=\".5\" r=\".5\"><stop offset=\"0\" stop-color=\"#7c5cff\" stop-opacity=\".35\"\/><stop offset=\"1\" stop-color=\"#7c5cff\" stop-opacity=\"0\"\/><\/radialGradient>\n<\/defs>\n<rect x=\"0\" y=\"-60\" width=\"1200\" height=\"640\" fill=\"url(#ddh-bg)\"\/>\n<circle cx=\"880\" cy=\"270\" r=\"260\" fill=\"url(#ddh-glow)\"\/>\n<circle cx=\"120\" cy=\"480\" r=\"170\" fill=\"url(#ddh-glow)\"\/>\n<g fill=\"#7c5cff\" opacity=\".25\"><circle cx=\"80\" cy=\"60\" r=\"2\"\/><circle cx=\"300\" cy=\"40\" r=\"2\"\/><circle cx=\"560\" cy=\"30\" r=\"2\"\/><circle cx=\"1150\" cy=\"40\" r=\"2\"\/><circle cx=\"1140\" cy=\"480\" r=\"2\"\/><circle cx=\"480\" cy=\"500\" r=\"2\"\/><\/g>\n<text x=\"60\" y=\"120\" fill=\"#ffffff\" font-family=\"Segoe UI,Roboto,Arial,sans-serif\" font-size=\"54\" font-weight=\"800\">CSS Anchor<\/text>\n<text x=\"60\" y=\"182\" fill=\"#ffffff\" font-family=\"Segoe UI,Roboto,Arial,sans-serif\" font-size=\"54\" font-weight=\"800\">Positioning<\/text>\n<rect x=\"60\" y=\"208\" width=\"220\" height=\"5\" rx=\"2.5\" fill=\"url(#ddh-ac)\"\/>\n<text x=\"60\" y=\"256\" fill=\"#c9d1ff\" font-family=\"Segoe UI,Roboto,Arial,sans-serif\" font-size=\"26\" font-weight=\"600\">Tooltips, menus &amp; popovers<\/text>\n<text x=\"60\" y=\"292\" fill=\"#c9d1ff\" font-family=\"Segoe UI,Roboto,Arial,sans-serif\" font-size=\"26\" font-weight=\"600\">without JavaScript<\/text>\n<g font-family=\"JetBrains Mono,Consolas,monospace\" font-size=\"17\" fill=\"#8f99c9\">\n<text x=\"60\" y=\"370\">anchor-name: <tspan fill=\"#a99bff\">&#8211;btn<\/tspan>;<\/text>\n<text x=\"60\" y=\"400\">position-anchor: <tspan fill=\"#a99bff\">&#8211;btn<\/tspan>;<\/text>\n<text x=\"60\" y=\"430\">position-area: <tspan fill=\"#7fb6ff\">top<\/tspan>;<\/text>\n<text x=\"60\" y=\"460\">position-try-fallbacks: <tspan fill=\"#7fb6ff\">flip-block<\/tspan>;<\/text>\n<\/g>\n<g fill=\"none\" stroke=\"#3a4486\" stroke-width=\"2.5\" stroke-dasharray=\"7 7\">\n<path id=\"ddh-p1\" d=\"M880 248 L880 160\"\/>\n<path id=\"ddh-p2\" d=\"M880 308 L880 380\"\/>\n<path id=\"ddh-p3\" d=\"M960 278 L1030 278\"\/>\n<\/g>\n<g font-family=\"Segoe UI,Roboto,Arial,sans-serif\" text-anchor=\"middle\">\n<g class=\"node\"><rect x=\"790\" y=\"248\" width=\"180\" height=\"60\" rx=\"14\" fill=\"url(#ddh-ac)\"\/><text x=\"880\" y=\"286\" fill=\"#fff\" font-size=\"22\" font-weight=\"700\">\u2693 Anchor<\/text><\/g>\n<g class=\"node\"><rect x=\"780\" y=\"100\" width=\"200\" height=\"56\" rx=\"12\" fill=\"#1b2350\" stroke=\"#7c5cff\" stroke-width=\"2.5\"\/><text x=\"880\" y=\"135\" fill=\"#e6e9ff\" font-size=\"19\" font-weight=\"600\">Tooltip (top)<\/text><\/g>\n<g class=\"node\"><rect x=\"780\" y=\"384\" width=\"200\" height=\"110\" rx=\"12\" fill=\"#1b2350\" stroke=\"#3178c6\" stroke-width=\"2.5\"\/><text x=\"880\" y=\"414\" fill=\"#e6e9ff\" font-size=\"19\" font-weight=\"600\">Menu (bottom)<\/text><rect x=\"805\" y=\"428\" width=\"150\" height=\"14\" rx=\"5\" fill=\"#2c3672\"\/><rect x=\"805\" y=\"452\" width=\"120\" height=\"14\" rx=\"5\" fill=\"#2c3672\"\/><rect x=\"805\" y=\"476\" width=\"135\" height=\"10\" rx=\"5\" fill=\"#2c3672\"\/><\/g>\n<g class=\"node\"><rect x=\"1034\" y=\"236\" width=\"140\" height=\"84\" rx=\"12\" fill=\"#1b2350\" stroke=\"#7c5cff\" stroke-width=\"2.5\"\/><text x=\"1104\" y=\"272\" fill=\"#e6e9ff\" font-size=\"18\" font-weight=\"600\">Card<\/text><text x=\"1104\" y=\"298\" fill=\"#8f99c9\" font-size=\"15\">(right)<\/text><\/g>\n<\/g>\n<circle r=\"6\" fill=\"#7c5cff\"><animateMotion dur=\"2.2s\" repeatCount=\"indefinite\"><mpath href=\"#ddh-p1\"\/><\/animateMotion><\/circle>\n<circle r=\"6\" fill=\"#3178c6\"><animateMotion dur=\"2.2s\" begin=\".6s\" repeatCount=\"indefinite\"><mpath href=\"#ddh-p2\"\/><\/animateMotion><\/circle>\n<circle r=\"6\" fill=\"#a99bff\"><animateMotion dur=\"2s\" begin=\"1.1s\" repeatCount=\"indefinite\"><mpath href=\"#ddh-p3\"\/><\/animateMotion><\/circle>\n<text x=\"1140\" y=\"505\" fill=\"#5d679c\" font-family=\"Segoe UI,Roboto,Arial,sans-serif\" font-size=\"16\" text-anchor=\"end\">devdojo.co.in<\/text>\n<\/svg><\/div>\n\n<p>Every web app has small floating things: tooltips, dropdown menus, &#8220;more options&#8221; buttons, help bubbles. For years we needed a JavaScript library like Popper or Floating UI just to keep them stuck next to their button. <strong>CSS anchor positioning<\/strong> changes that. It lets you tie one element to another with a few lines of CSS, and the browser does the measuring, the scrolling and even the &#8220;flip to the other side if there is no room&#8221; logic for you.<\/p>\n\n<p>In this CSS anchor positioning tutorial you will learn the core ideas step by step, build a real tooltip and a real dropdown menu, handle screen edges, avoid the most common mistakes, and use it safely in React. No libraries and no <code>getBoundingClientRect()<\/code>.<\/p>\n\n<div class=\"dd-summary\"><strong class=\"lbl\">Quick Summary<\/strong>\n<ul>\n<li>Put <code>anchor-name: --something<\/code> on the element you want to attach to (the <em>anchor<\/em>).<\/li>\n<li>On the floating element, set <code>position: absolute<\/code> or <code>fixed<\/code>, then <code>position-anchor: --something<\/code>.<\/li>\n<li>Place it with <code>position-area<\/code> (easy 3\u00d73 grid) or the <code>anchor()<\/code> function (exact edges).<\/li>\n<li>Add <code>position-try-fallbacks: flip-block<\/code> so it flips when it hits the edge of the screen.<\/li>\n<li>Works in Chrome\/Edge 125+, Safari 26+ and Firefox 147+, so the core feature is now usable in all major browsers.<\/li>\n<\/ul><\/div>\n\n<nav class=\"dd-toc\" aria-label=\"Table of contents\"><strong>Table of Contents<\/strong>\n<ol>\n<li><a href=\"#what-is\">What is CSS anchor positioning?<\/a><\/li>\n<li><a href=\"#support\">Browser support today<\/a><\/li>\n<li><a href=\"#first-tooltip\">Your first anchored tooltip<\/a><\/li>\n<li><a href=\"#position-area\">Placing elements with position-area<\/a><\/li>\n<li><a href=\"#anchor-function\">Exact control with anchor() and anchor-size()<\/a><\/li>\n<li><a href=\"#popover-menu\">Build a dropdown menu with popover<\/a><\/li>\n<li><a href=\"#fallbacks\">Flipping at screen edges<\/a><\/li>\n<li><a href=\"#lists\">Many anchors in a list<\/a><\/li>\n<li><a href=\"#react\">Using it in React<\/a><\/li>\n<li><a href=\"#errors\">Common errors and fixes<\/a><\/li>\n<li><a href=\"#best-practices\">Best practices<\/a><\/li>\n<li><a href=\"#faq\">FAQ<\/a><\/li>\n<\/ol><\/nav>\n<\/div>\n\n\n\n<div class=\"dd-post\">\n<h2 id=\"what-is\">What is CSS Anchor Positioning?<\/h2>\n\n<p>CSS anchor positioning is a browser feature that lets you position an element <strong>relative to another element anywhere on the page<\/strong>, not just relative to its parent. You give one element a name, and you tell another element &#8220;stay next to the element with this name&#8221;.<\/p>\n\n<p>Before this, the classic CSS trick was to wrap the button and tooltip in a <code>position: relative<\/code> parent and use <code>position: absolute<\/code> on the tooltip. That works until the tooltip gets cut off by a parent with <code>overflow: hidden<\/code>, or it goes off-screen, or you need it to follow a button inside a scrolling list. Then you reached for JavaScript to measure positions on every scroll and resize.<\/p>\n\n<p>With anchor positioning, the browser itself knows where the anchor is. Three ideas are all you need:<\/p>\n\n<div class=\"dd-cards\">\n<div class=\"dd-card\"><b>1. The anchor<\/b>The element you attach to, such as a button. It gets <code>anchor-name: --my-btn<\/code>.<\/div>\n<div class=\"dd-card\"><b>2. The positioned element<\/b>The floating tooltip or menu. It uses <code>position-anchor: --my-btn<\/code>.<\/div>\n<div class=\"dd-card\"><b>3. The placement<\/b>Where it goes: <code>position-area: top<\/code>, or exact edges with <code>anchor()<\/code>.<\/div>\n<\/div>\n\n<figure>\n<svg viewBox=\"0 0 900 360\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" role=\"img\" aria-labelledby=\"f1-t f1-d\">\n<title id=\"f1-t\">How an anchor name links two elements<\/title>\n<desc id=\"f1-d\">On the left, a button has anchor-name &#8211;info. On the right, a tooltip has position-anchor &#8211;info. An arrow joins them, and the tooltip appears above the button.<\/desc>\n<rect width=\"900\" height=\"360\" fill=\"#f6f7fc\"\/>\n<g font-family=\"Segoe UI,Roboto,Arial,sans-serif\">\n<rect x=\"40\" y=\"60\" width=\"300\" height=\"120\" rx=\"14\" fill=\"#fff\" stroke=\"#d6dcf5\" stroke-width=\"2\"\/>\n<text x=\"60\" y=\"95\" font-size=\"16\" font-weight=\"700\" fill=\"#3a2fa0\">.info-btn  (the anchor)<\/text>\n<text x=\"60\" y=\"130\" font-size=\"16\" fill=\"#1f2433\" font-family=\"Consolas,Menlo,monospace\">anchor-name: &#8211;info;<\/text>\n<rect x=\"40\" y=\"200\" width=\"300\" height=\"120\" rx=\"14\" fill=\"#fff\" stroke=\"#d6dcf5\" stroke-width=\"2\"\/>\n<text x=\"60\" y=\"235\" font-size=\"16\" font-weight=\"700\" fill=\"#3a2fa0\">.tooltip  (positioned)<\/text>\n<text x=\"60\" y=\"265\" font-size=\"15\" fill=\"#1f2433\" font-family=\"Consolas,Menlo,monospace\">position: absolute;<\/text>\n<text x=\"60\" y=\"288\" font-size=\"15\" fill=\"#1f2433\" font-family=\"Consolas,Menlo,monospace\">position-anchor: &#8211;info;<\/text>\n<text x=\"60\" y=\"311\" font-size=\"15\" fill=\"#1f2433\" font-family=\"Consolas,Menlo,monospace\">position-area: top;<\/text>\n<path d=\"M340 120 C420 120 420 260 340 260\" fill=\"none\" stroke=\"#7c5cff\" stroke-width=\"2.5\" stroke-dasharray=\"6 6\"\/>\n<text x=\"425\" y=\"196\" font-size=\"15\" fill=\"#7c5cff\" font-weight=\"700\">same name<\/text>\n<line x1=\"520\" y1=\"180\" x2=\"580\" y2=\"180\" stroke=\"#3178c6\" stroke-width=\"3\"\/>\n<polygon points=\"580,172 596,180 580,188\" fill=\"#3178c6\"\/>\n<text x=\"740\" y=\"60\" text-anchor=\"middle\" font-size=\"15\" fill=\"#5b6275\">Result in the browser<\/text>\n<rect x=\"620\" y=\"80\" width=\"240\" height=\"250\" rx=\"14\" fill=\"#fff\" stroke=\"#d6dcf5\" stroke-width=\"2\"\/>\n<rect x=\"650\" y=\"140\" width=\"180\" height=\"44\" rx=\"8\" fill=\"#151b3b\"\/>\n<text x=\"740\" y=\"168\" text-anchor=\"middle\" font-size=\"15\" fill=\"#fff\">This is a tooltip<\/text>\n<polygon points=\"732,184 748,184 740,194\" fill=\"#151b3b\"\/>\n<rect x=\"675\" y=\"206\" width=\"130\" height=\"46\" rx=\"10\" fill=\"#3178c6\"\/>\n<text x=\"740\" y=\"235\" text-anchor=\"middle\" font-size=\"15\" fill=\"#fff\" font-weight=\"700\">What is this?<\/text>\n<\/g>\n<\/svg>\n<figcaption>The anchor and the tooltip only need to share a name. They do not have to be parent and child.<\/figcaption>\n<\/figure>\n\n<h2 id=\"support\">Browser Support Today<\/h2>\n\n<p>Chrome and Edge shipped anchor positioning in version 125 (May 2024). Safari added it in Safari 26, and Firefox followed in Firefox 147, which made the core feature available in every major browser. It is also part of the <a href=\"https:\/\/web.dev\/blog\/interop-2026\" target=\"_blank\" rel=\"noopener\">Interop 2026<\/a> effort, where browser makers work together on fixing remaining bugs.<\/p>\n\n<div class=\"dd-note\"><strong>Note:<\/strong> The core properties (<code>anchor-name<\/code>, <code>position-anchor<\/code>, <code>position-area<\/code>, <code>anchor()<\/code>, <code>position-try-fallbacks<\/code>) are safe to use. Some newer extras like <code>position-visibility<\/code>, <code>anchor-scope<\/code> and anchored container queries are still rolling out, so test them and keep a fallback. Always check the latest table on <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_anchor_positioning\" target=\"_blank\" rel=\"noopener\">MDN&#8217;s anchor positioning guide<\/a>.<\/div>\n\n<h2 id=\"first-tooltip\">Your First Anchored Tooltip<\/h2>\n\n<p>Let&#8217;s start with the smallest working example. Here is the HTML. Notice the tooltip is a <em>sibling<\/em> of the button, not a child:<\/p>\n\n<pre><code class=\"language-html\">&lt;button class=\"info-btn\"&gt;What is this?&lt;\/button&gt;\n&lt;div class=\"tooltip\"&gt;This tooltip is placed by CSS only.&lt;\/div&gt;<\/code><\/pre>\n\n<p>And here is the CSS:<\/p>\n\n<pre><code class=\"language-css\">\/* 1. Give the anchor a name (it must start with two dashes) *\/\n.info-btn {\n  anchor-name: --info;\n}\n\n\/* 2. Tie the floating element to that name *\/\n.tooltip {\n  position: absolute;          \/* or fixed *\/\n  position-anchor: --info;     \/* \"stick to the element called --info\" *\/\n  position-area: top;          \/* sit above it, centered *\/\n  margin-bottom: 8px;          \/* small gap between the two *\/\n\n  \/* just styling *\/\n  padding: 6px 10px;\n  border-radius: 6px;\n  background: #151b3b;\n  color: #fff;\n  font-size: 14px;\n  white-space: nowrap;\n}<\/code><\/pre>\n\n<p>That&#8217;s it. The tooltip now sits centered above the button. If the button moves because of a layout change, the tooltip moves with it. No JavaScript is watching anything.<\/p>\n\n<div class=\"dd-tip\"><strong>Tip:<\/strong> Anchor names are &#8220;dashed idents&#8221;, just like CSS custom properties. Write <code>--info<\/code>, not <code>info<\/code>. A name without two dashes is invalid and is silently ignored.<\/div>\n\n<p>To show the tooltip only on hover or keyboard focus, add a simple toggle:<\/p>\n\n<pre><code class=\"language-css\">.tooltip { opacity: 0; transition: opacity .15s; pointer-events: none; }\n.info-btn:hover + .tooltip,\n.info-btn:focus-visible + .tooltip { opacity: 1; }<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"dd-post\">\n<h2 id=\"position-area\">Placing Elements with position-area<\/h2>\n\n<p><code>position-area<\/code> is the easiest way to place things. Imagine a 3\u00d73 grid drawn around the anchor. The anchor is the middle cell. You simply name the cell (or cells) where the floating element should go.<\/p>\n\n<figure>\n<svg viewBox=\"0 0 900 400\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" role=\"img\" aria-labelledby=\"f2-t f2-d\">\n<title id=\"f2-t\">The position-area grid<\/title>\n<desc id=\"f2-d\">A 3 by 3 grid around an anchor. Rows are top, center, bottom and columns are left, center, right. The highlighted cell shows position-area: top. A wider highlight shows bottom span-right.<\/desc>\n<rect width=\"900\" height=\"400\" fill=\"#f6f7fc\"\/>\n<g font-family=\"Segoe UI,Roboto,Arial,sans-serif\" font-size=\"15\" text-anchor=\"middle\">\n<g fill=\"#fff\" stroke=\"#b9c1e0\" stroke-width=\"2\" stroke-dasharray=\"6 5\">\n<rect x=\"230\" y=\"60\" width=\"140\" height=\"80\" rx=\"8\"\/><rect x=\"380\" y=\"60\" width=\"140\" height=\"80\" rx=\"8\"\/><rect x=\"530\" y=\"60\" width=\"140\" height=\"80\" rx=\"8\"\/>\n<rect x=\"230\" y=\"150\" width=\"140\" height=\"80\" rx=\"8\"\/><rect x=\"530\" y=\"150\" width=\"140\" height=\"80\" rx=\"8\"\/>\n<rect x=\"230\" y=\"240\" width=\"140\" height=\"80\" rx=\"8\"\/><rect x=\"380\" y=\"240\" width=\"140\" height=\"80\" rx=\"8\"\/><rect x=\"530\" y=\"240\" width=\"140\" height=\"80\" rx=\"8\"\/>\n<\/g>\n<rect x=\"380\" y=\"60\" width=\"140\" height=\"80\" rx=\"8\" fill=\"#7c5cff\" opacity=\".85\"\/>\n<text x=\"450\" y=\"98\" fill=\"#fff\" font-weight=\"700\">top<\/text>\n<text x=\"450\" y=\"120\" fill=\"#efeaff\" font-size=\"13\">(center column)<\/text>\n<rect x=\"380\" y=\"150\" width=\"140\" height=\"80\" rx=\"10\" fill=\"#151b3b\" stroke=\"#3178c6\" stroke-width=\"3\"\/>\n<text x=\"450\" y=\"196\" fill=\"#fff\" font-weight=\"700\">\u2693 anchor<\/text>\n<rect x=\"450\" y=\"244\" width=\"216\" height=\"72\" rx=\"8\" fill=\"none\" stroke=\"#3178c6\" stroke-width=\"3\"\/>\n<text x=\"558\" y=\"285\" fill=\"#3178c6\" font-weight=\"700\">bottom span-right<\/text>\n<text x=\"300\" y=\"104\" fill=\"#5b6275\">top left<\/text><text x=\"600\" y=\"104\" fill=\"#5b6275\">top right<\/text>\n<text x=\"300\" y=\"194\" fill=\"#5b6275\">left<\/text><text x=\"600\" y=\"194\" fill=\"#5b6275\">right<\/text>\n<text x=\"300\" y=\"284\" fill=\"#5b6275\">bottom left<\/text>\n<text x=\"450\" y=\"45\" fill=\"#1f2433\" font-size=\"14\">center<\/text>\n<text x=\"300\" y=\"45\" fill=\"#1f2433\" font-size=\"14\">left<\/text>\n<text x=\"600\" y=\"45\" fill=\"#1f2433\" font-size=\"14\">right<\/text>\n<text x=\"200\" y=\"104\" fill=\"#1f2433\" font-size=\"14\" text-anchor=\"end\">top<\/text>\n<text x=\"200\" y=\"194\" fill=\"#1f2433\" font-size=\"14\" text-anchor=\"end\">center<\/text>\n<text x=\"200\" y=\"284\" fill=\"#1f2433\" font-size=\"14\" text-anchor=\"end\">bottom<\/text>\n<text x=\"450\" y=\"365\" fill=\"#5b6275\">&#8220;span-&#8221; values let the box stretch across two cells<\/text>\n<\/g>\n<\/svg>\n<figcaption>position-area places the floating box into one or more cells of an invisible 3\u00d73 grid around the anchor.<\/figcaption>\n<\/figure>\n\n<p>Here are the values you will use most:<\/p>\n\n<pre><code class=\"language-css\">.tooltip { position-area: top; }               \/* above, centered *\/\n.tooltip { position-area: bottom; }            \/* below, centered *\/\n.tooltip { position-area: right; }             \/* to the right, centered *\/\n.tooltip { position-area: top left; }          \/* top-left corner cell *\/\n.tooltip { position-area: bottom span-right; } \/* below, starts at the anchor's\n                                                  center and grows to the right *\/\n.tooltip { position-area: bottom span-all; }   \/* below, as wide as all 3 columns *\/<\/code><\/pre>\n\n<h3>Try it: position-area explorer<\/h3>\n\n<p>Click a value below to see which grid cell it fills. The dark cell is the anchor.<\/p>\n\n<div class=\"dd-tabs\">\n<input type=\"radio\" name=\"pa\" id=\"pa1\" checked>\n<input type=\"radio\" name=\"pa\" id=\"pa2\">\n<input type=\"radio\" name=\"pa\" id=\"pa3\">\n<input type=\"radio\" name=\"pa\" id=\"pa4\">\n<input type=\"radio\" name=\"pa\" id=\"pa5\">\n<div class=\"labels\"><label for=\"pa1\">top<\/label><label for=\"pa2\">bottom<\/label><label for=\"pa3\">right<\/label><label for=\"pa4\">top left<\/label><label for=\"pa5\">bottom span-right<\/label><\/div>\n<div class=\"panel p1\"><div class=\"pa-grid\" aria-hidden=\"true\"><span><\/span><span class=\"on\"><\/span><span><\/span><span><\/span><span class=\"a\">\u2693<\/span><span><\/span><span><\/span><span><\/span><span><\/span><\/div><div class=\"pa-text\"><code>position-area: top;<\/code><br>Centered above the anchor. Perfect for classic tooltips. Pair it with <code>margin-bottom<\/code> for a gap.<\/div><\/div>\n<div class=\"panel p2\"><div class=\"pa-grid\" aria-hidden=\"true\"><span><\/span><span><\/span><span><\/span><span><\/span><span class=\"a\">\u2693<\/span><span><\/span><span><\/span><span class=\"on\"><\/span><span><\/span><\/div><div class=\"pa-text\"><code>position-area: bottom;<\/code><br>Centered below the anchor. Good for help text under form fields.<\/div><\/div>\n<div class=\"panel p3\"><div class=\"pa-grid\" aria-hidden=\"true\"><span><\/span><span><\/span><span><\/span><span><\/span><span class=\"a\">\u2693<\/span><span class=\"on\"><\/span><span><\/span><span><\/span><span><\/span><\/div><div class=\"pa-text\"><code>position-area: right;<\/code><br>To the right, vertically centered. Great for sidebar icons and hover cards.<\/div><\/div>\n<div class=\"panel p4\"><div class=\"pa-grid\" aria-hidden=\"true\"><span class=\"on\"><\/span><span><\/span><span><\/span><span><\/span><span class=\"a\">\u2693<\/span><span><\/span><span><\/span><span><\/span><span><\/span><\/div><div class=\"pa-text\"><code>position-area: top left;<\/code><br>The top-left corner cell. Use it for small badges or corner labels.<\/div><\/div>\n<div class=\"panel p5\"><div class=\"pa-grid\" aria-hidden=\"true\"><span><\/span><span><\/span><span><\/span><span><\/span><span class=\"a\">\u2693<\/span><span><\/span><span><\/span><span class=\"on\"><\/span><span class=\"on\"><\/span><\/div><div class=\"pa-text\"><code>position-area: bottom span-right;<\/code><br>Below the anchor, starting at its center and growing to the right. The usual choice for dropdown menus.<\/div><\/div>\n<\/div>\n\n<div class=\"dd-warn\"><strong>Watch out for old names:<\/strong> Early versions of Chrome called this property <code>inset-area<\/code>. It was renamed to <code>position-area<\/code>. Many old tutorials and AI-generated snippets still use <code>inset-area<\/code>, and the browser ignores it without any error.<\/div>\n\n<h2 id=\"anchor-function\">Exact Control with anchor() and anchor-size()<\/h2>\n\n<p>Sometimes you need pixel-level control, for example &#8220;the left edge of my menu should line up with the left edge of the button&#8221;. For that, use the <code>anchor()<\/code> function inside normal inset properties like <code>top<\/code>, <code>left<\/code>, <code>right<\/code> and <code>bottom<\/code>:<\/p>\n\n<pre><code class=\"language-css\">.tooltip {\n  position: absolute;\n  position-anchor: --info;\n\n  \/* top edge of tooltip = bottom edge of anchor *\/\n  top: anchor(bottom);\n\n  \/* left edge of tooltip = left edge of anchor *\/\n  left: anchor(left);\n\n  \/* you can even do math with it *\/\n  margin-top: 6px;\n  \/* top: calc(anchor(bottom) + 6px);  works too *\/\n}<\/code><\/pre>\n\n<p>Read <code>top: anchor(bottom)<\/code> as: &#8220;my top edge goes where the anchor&#8217;s bottom edge is&#8221;. You can use <code>top<\/code>, <code>bottom<\/code>, <code>left<\/code>, <code>right<\/code>, <code>center<\/code>, logical values like <code>start<\/code> and <code>end<\/code>, or a percentage such as <code>anchor(50%)<\/code>.<\/p>\n\n<p>The partner function <code>anchor-size()<\/code> reads the anchor&#8217;s size. A common use is making a dropdown exactly as wide as its button:<\/p>\n\n<pre><code class=\"language-css\">.dropdown {\n  position: absolute;\n  position-anchor: --select;\n  position-area: bottom span-right;\n  \/* make the list exactly as wide as the button *\/\n  width: anchor-size(width);\n}<\/code><\/pre>\n\n<div class=\"dd-note\"><strong>Which one should I use?<\/strong> Start with <code>position-area<\/code>. It is shorter, easier to read and works nicely with flipping. Use <code>anchor()<\/code> only when you need a precise edge-to-edge alignment.<\/div>\n<\/div>\n\n\n\n<div class=\"dd-post\">\n<h2 id=\"popover-menu\">Build a Dropdown Menu with popover<\/h2>\n\n<p>Anchor positioning becomes really powerful when combined with the HTML <code>popover<\/code> attribute. Popover gives you open\/close behavior, &#8220;click outside to close&#8221;, the Esc key and the top layer (so it is never cut off by <code>overflow: hidden<\/code>). Anchor positioning gives you the placement. Together they replace most dropdown libraries.<\/p>\n\n<pre><code class=\"language-html\">&lt;button class=\"menu-btn\" popovertarget=\"user-menu\"&gt;\n  Account \u25be\n&lt;\/button&gt;\n\n&lt;div id=\"user-menu\" popover&gt;\n  &lt;a href=\"\/profile\"&gt;Profile&lt;\/a&gt;\n  &lt;a href=\"\/settings\"&gt;Settings&lt;\/a&gt;\n  &lt;a href=\"\/logout\"&gt;Log out&lt;\/a&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n<pre><code class=\"language-css\">.menu-btn {\n  anchor-name: --account;\n}\n\n#user-menu {\n  \/* popovers already use position: fixed and live in the top layer *\/\n  position-anchor: --account;\n  position-area: bottom span-left;   \/* below, aligned to the button's right edge *\/\n\n  \/* IMPORTANT: undo the browser's default \"center the popover\" styles *\/\n  inset: auto;\n  margin: 0;\n  margin-top: 6px;\n\n  \/* flip above the button if there is no room below *\/\n  position-try-fallbacks: flip-block;\n\n  \/* looks *\/\n  display: none;\n  padding: 6px;\n  min-width: 180px;\n  border: 1px solid #d9deef;\n  border-radius: 10px;\n  background: #fff;\n  box-shadow: 0 12px 30px rgba(15, 20, 48, .18);\n}\n\n#user-menu:popover-open {\n  display: grid;\n}\n\n#user-menu a {\n  padding: 8px 12px;\n  border-radius: 6px;\n  color: #1f2433;\n  text-decoration: none;\n}\n\n#user-menu a:hover {\n  background: #eef1fb;\n}<\/code><\/pre>\n\n<p>Clicking the button opens the menu right under it. Clicking outside or pressing Esc closes it. All of this works with zero lines of JavaScript.<\/p>\n\n<div class=\"dd-warn\"><strong>The #1 popover mistake:<\/strong> Browsers style popovers with <code>inset: 0<\/code> and <code>margin: auto<\/code> so they appear in the middle of the screen. If you forget <code>inset: auto<\/code> and <code>margin: 0<\/code>, your menu will look stuck in the center and anchor positioning will seem &#8220;broken&#8221;.<\/div>\n\n<p>Newer Chromium versions also create an <em>implicit anchor<\/em>: a popover opened by a <code>popovertarget<\/code> button is automatically anchored to that button, so you could skip <code>anchor-name<\/code>. For now, setting <code>anchor-name<\/code> and <code>position-anchor<\/code> yourself is the safest choice across all browsers.<\/p>\n\n<h2 id=\"fallbacks\">Flipping at Screen Edges with position-try-fallbacks<\/h2>\n\n<p>A tooltip placed on <code>top<\/code> looks great until the button is near the top of the screen. Then half the tooltip disappears. JavaScript libraries solved this with &#8220;flip&#8221; logic. CSS now has it built in with <code>position-try-fallbacks<\/code>.<\/p>\n\n<figure>\n<svg viewBox=\"0 0 900 340\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" role=\"img\" aria-labelledby=\"f3-t f3-d\">\n<title id=\"f3-t\">How flip-block works<\/title>\n<desc id=\"f3-d\">Left: a tooltip above a button gets cut off by the top of the viewport. Right: with flip-block, the browser moves the tooltip below the button so it fits.<\/desc>\n<rect width=\"900\" height=\"340\" fill=\"#f6f7fc\"\/>\n<g font-family=\"Segoe UI,Roboto,Arial,sans-serif\" text-anchor=\"middle\">\n<rect x=\"40\" y=\"70\" width=\"370\" height=\"240\" rx=\"12\" fill=\"#fff\" stroke=\"#d6dcf5\" stroke-width=\"2\"\/>\n<rect x=\"490\" y=\"70\" width=\"370\" height=\"240\" rx=\"12\" fill=\"#fff\" stroke=\"#d6dcf5\" stroke-width=\"2\"\/>\n<line x1=\"40\" y1=\"70\" x2=\"410\" y2=\"70\" stroke=\"#e05252\" stroke-width=\"3\"\/>\n<line x1=\"490\" y1=\"70\" x2=\"860\" y2=\"70\" stroke=\"#e05252\" stroke-width=\"3\"\/>\n<text x=\"225\" y=\"24\" font-size=\"17\" font-weight=\"700\" fill=\"#1f2433\">Without fallbacks<\/text>\n<text x=\"675\" y=\"24\" font-size=\"17\" font-weight=\"700\" fill=\"#1f2433\">With flip-block<\/text>\n<rect x=\"135\" y=\"44\" width=\"180\" height=\"40\" rx=\"8\" fill=\"#151b3b\" opacity=\".3\"\/>\n<rect x=\"135\" y=\"70\" width=\"180\" height=\"14\" fill=\"#151b3b\"\/>\n<text x=\"225\" y=\"62\" font-size=\"14\" fill=\"#e05252\" font-weight=\"700\">cut off \u2715<\/text>\n<rect x=\"160\" y=\"96\" width=\"130\" height=\"44\" rx=\"10\" fill=\"#3178c6\"\/>\n<text x=\"225\" y=\"124\" font-size=\"15\" fill=\"#fff\" font-weight=\"700\">Button<\/text>\n<text x=\"52\" y=\"90\" font-size=\"12\" fill=\"#e05252\" text-anchor=\"start\">viewport edge<\/text>\n<rect x=\"610\" y=\"96\" width=\"130\" height=\"44\" rx=\"10\" fill=\"#3178c6\"\/>\n<text x=\"675\" y=\"124\" font-size=\"15\" fill=\"#fff\" font-weight=\"700\">Button<\/text>\n<polygon points=\"667,156 683,156 675,146\" fill=\"#151b3b\"\/>\n<rect x=\"585\" y=\"156\" width=\"180\" height=\"44\" rx=\"8\" fill=\"#151b3b\"\/>\n<text x=\"675\" y=\"184\" font-size=\"14\" fill=\"#fff\">Tooltip flipped \u2713<\/text>\n<path d=\"M800 150 C840 150 840 190 790 190\" fill=\"none\" stroke=\"#7c5cff\" stroke-width=\"2.5\" stroke-dasharray=\"5 5\"\/>\n<polygon points=\"792,183 780,190 792,197\" fill=\"#7c5cff\"\/>\n<text x=\"225\" y=\"250\" font-size=\"14\" fill=\"#5b6275\">position-area: top;<\/text>\n<text x=\"675\" y=\"240\" font-size=\"14\" fill=\"#5b6275\">position-area: top;<\/text>\n<text x=\"675\" y=\"262\" font-size=\"14\" fill=\"#7c5cff\" font-weight=\"700\">position-try-fallbacks: flip-block;<\/text>\n<\/g>\n<\/svg>\n<figcaption>When the first position does not fit, the browser tries your fallbacks in order and uses the first one that fits.<\/figcaption>\n<\/figure>\n\n<pre><code class=\"language-css\">.tooltip {\n  position: fixed;\n  position-anchor: --info;\n  position-area: top;\n\n  \/* try these, in order, when \"top\" does not fit *\/\n  position-try-fallbacks:\n    flip-block,               \/* top -&gt; bottom          *\/\n    flip-inline,              \/* left &lt;-&gt; right         *\/\n    flip-block flip-inline;   \/* both at once (corners) *\/\n}<\/code><\/pre>\n\n<ul>\n<li><code>flip-block<\/code> mirrors the position across the block axis (top \u2194 bottom in English text).<\/li>\n<li><code>flip-inline<\/code> mirrors across the inline axis (left \u2194 right).<\/li>\n<li><code>flip-block flip-inline<\/code> written together (space, no comma) flips both at once, which is what you need for corner positions.<\/li>\n<li>You can also list plain <code>position-area<\/code> values like <code>bottom<\/code> or <code>right<\/code> as fallbacks.<\/li>\n<\/ul>\n\n<h3>Custom fallbacks with @position-try<\/h3>\n\n<p>If a simple flip is not enough, define your own named fallback with <code>@position-try<\/code>. Inside it you can change <code>position-area<\/code>, insets, margins, sizes, alignment and <code>position-anchor<\/code>:<\/p>\n\n<pre><code class=\"language-css\">@position-try --right-side {\n  position-area: right;\n  margin: 0 0 0 10px;\n  max-width: 220px;\n}\n\n@position-try --below-wide {\n  position-area: bottom span-all;\n  margin: 10px 0 0 0;\n}\n\n.tooltip {\n  position: fixed;\n  position-anchor: --info;\n  position-area: top;\n  margin-bottom: 10px;\n  position-try-fallbacks: --right-side, flip-block, --below-wide;\n}<\/code><\/pre>\n\n<p>The browser tries <code>top<\/code> first, then your custom right-side version, then the flipped version, then the wide one below. If nothing fits, it keeps the original position, so always design a &#8220;good enough&#8221; default.<\/p>\n\n<h3>Hiding a tooltip when its anchor scrolls away<\/h3>\n\n<p>If a tooltip is <code>position: fixed<\/code> and the button scrolls out of a container, the tooltip can be left floating alone. The newer <code>position-visibility<\/code> property fixes that:<\/p>\n\n<pre><code class=\"language-css\">.tooltip {\n  position: fixed;\n  position-anchor: --info;\n  position-area: top;\n\n  \/* hide the tooltip when its anchor scrolls out of view *\/\n  position-visibility: anchors-visible;\n}<\/code><\/pre>\n\n<p>Use <code>no-overflow<\/code> instead if you want it hidden whenever it would overflow its container. Remember this property is newer, so treat it as a nice extra.<\/p>\n<\/div>\n\n\n\n<div class=\"dd-post\">\n<h2 id=\"lists\">Many Anchors in a List (anchor-scope)<\/h2>\n\n<p>Here is a trap almost everyone hits. You have a list of team members, each with an avatar and a hover card. You put the same <code>anchor-name: --avatar<\/code> on every avatar. Result: <strong>every card attaches to the last avatar<\/strong>. When several elements share a name, the browser picks the last suitable one in the page.<\/p>\n\n<pre><code class=\"language-html\">&lt;ul class=\"team\"&gt;\n  &lt;li class=\"member\"&gt;\n    &lt;img src=\"\/asha.jpg\" alt=\"Asha\" class=\"avatar\"&gt;\n    &lt;span class=\"card\"&gt;Asha \u00b7 Frontend lead&lt;\/span&gt;\n  &lt;\/li&gt;\n  &lt;li class=\"member\"&gt;\n    &lt;img src=\"\/ravi.jpg\" alt=\"Ravi\" class=\"avatar\"&gt;\n    &lt;span class=\"card\"&gt;Ravi \u00b7 Backend developer&lt;\/span&gt;\n  &lt;\/li&gt;\n  &lt;!-- ...more members --&gt;\n&lt;\/ul&gt;<\/code><\/pre>\n\n<p>The clean fix is <code>anchor-scope<\/code>. It limits a name to one subtree, so each list item has its own private <code>--avatar<\/code>:<\/p>\n\n<pre><code class=\"language-css\">.member {\n  anchor-scope: --avatar;   \/* each &lt;li&gt; gets its own private \"--avatar\" *\/\n}\n\n.avatar {\n  anchor-name: --avatar;    \/* same name on every avatar is now OK *\/\n}\n\n.card {\n  position: absolute;\n  position-anchor: --avatar;\n  position-area: right;\n  margin-left: 8px;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity .2s;\n}\n\n.member:hover .card,\n.member:focus-within .card {\n  opacity: 1;\n}<\/code><\/pre>\n\n<p>If you need to support browsers without <code>anchor-scope<\/code>, or you render the list from data anyway, generate unique names per item:<\/p>\n\n<pre><code class=\"language-html\">&lt;!-- No anchor-scope? Give each pair a unique name with inline styles --&gt;\n&lt;li&gt;\n  &lt;img class=\"avatar\" style=\"anchor-name: --avatar-1\" alt=\"Asha\" src=\"\/asha.jpg\"&gt;\n  &lt;span class=\"card\" style=\"position-anchor: --avatar-1\"&gt;Asha \u00b7 Frontend lead&lt;\/span&gt;\n&lt;\/li&gt;<\/code><\/pre>\n\n<h2 id=\"react\">Using Anchor Positioning in React<\/h2>\n\n<p>Because this is plain CSS, it works in any framework: React, Next.js, Vue, Angular or plain HTML. In React, the main job is creating a unique anchor name per component instance. <code>useId()<\/code> is perfect for that. React 19 also supports the <code>popover<\/code> and <code>popoverTarget<\/code> attributes directly.<\/p>\n\n<pre><code class=\"language-jsx\">\/\/ Tooltip.jsx \u2014 works in React 19 (popover attributes are supported)\nimport { useId } from \"react\";\n\nexport default function Tooltip({ label, children }) {\n  \/\/ useId() ids can contain characters like \":\" or \"\u00ab\u00bb\" depending on the\n  \/\/ React version, so keep only characters that are safe in a CSS name\n  const id = useId().replace(\/[^a-zA-Z0-9_-]\/g, \"\");\n  const anchor = `--tip-${id}`;\n\n  return (\n    &lt;span className=\"tip-wrap\"&gt;\n      &lt;button\n        type=\"button\"\n        popoverTarget={`tip-${id}`}\n        style={{ anchorName: anchor }}\n      &gt;\n        {children}\n      &lt;\/button&gt;\n\n      &lt;span\n        id={`tip-${id}`}\n        popover=\"auto\"\n        className=\"tip\"\n        style={{ positionAnchor: anchor }}\n      &gt;\n        {label}\n      &lt;\/span&gt;\n    &lt;\/span&gt;\n  );\n}<\/code><\/pre>\n\n<pre><code class=\"language-css\">.tip {\n  position-area: top;\n  position-try-fallbacks: flip-block;\n  inset: auto;\n  margin: 0 0 8px 0;\n  padding: 6px 10px;\n  border: 0;\n  border-radius: 6px;\n  background: #151b3b;\n  color: #fff;\n}<\/code><\/pre>\n\n<p>Every <code>&lt;Tooltip&gt;<\/code> now gets its own anchor, so you can render hundreds of them without the &#8220;all tooltips jump to the last button&#8221; bug. If you are using TypeScript and see errors on <code>anchorName<\/code> in the style object, update your React types or cast the style object. Our <a href=\"https:\/\/devdojo.co.in\/index.php\/2026\/10\/07\/typescript-7-migration-guide\/\">TypeScript 7 migration guide<\/a> covers keeping your types and tooling up to date.<\/p>\n\n<div class=\"dd-tip\"><strong>Tip:<\/strong> You no longer need a <code>useEffect<\/code> that measures the button and sets <code>top<\/code>\/<code>left<\/code> on every scroll. If you are still learning how effects work and when to avoid them, read our post on <a href=\"https:\/\/devdojo.co.in\/?p=129\">the useEffect hook<\/a>.<\/div>\n<\/div>\n\n\n\n<div class=\"dd-post\">\n<h2 id=\"errors\">Common Errors and Fixes<\/h2>\n\n<div class=\"dd-tablewrap\"><table>\n<thead><tr><th>Problem<\/th><th>Likely cause<\/th><th>Fix<\/th><\/tr><\/thead>\n<tbody>\n<tr><td>Nothing happens at all<\/td><td>The floating element is not positioned<\/td><td>Add <code>position: absolute<\/code> or <code>position: fixed<\/code>. Anchor positioning only works on positioned elements.<\/td><\/tr>\n<tr><td>Name is ignored<\/td><td>Name has no leading dashes (<code>info<\/code>)<\/td><td>Use a dashed name: <code>--info<\/code>.<\/td><\/tr>\n<tr><td>Code from a tutorial does nothing<\/td><td>Old property names <code>inset-area<\/code> or <code>position-try-options<\/code><\/td><td>Use <code>position-area<\/code> and <code>position-try-fallbacks<\/code>.<\/td><\/tr>\n<tr><td>Popover stays in the middle of the screen<\/td><td>Default popover styles (<code>inset: 0; margin: auto<\/code>)<\/td><td>Add <code>inset: auto; margin: 0;<\/code> to the popover.<\/td><\/tr>\n<tr><td>All tooltips attach to the last item<\/td><td>Same <code>anchor-name<\/code> used many times<\/td><td>Use <code>anchor-scope<\/code> on each item, or unique names per item.<\/td><\/tr>\n<tr><td>Tooltip is clipped by a card<\/td><td>Parent has <code>overflow: hidden<\/code> and tooltip is <code>absolute<\/code><\/td><td>Use <code>position: fixed<\/code> or make it a <code>popover<\/code> (top layer).<\/td><\/tr>\n<tr><td>Anchor is not found when inside another positioned box<\/td><td>The anchor is in a different containing block that the browser cannot &#8220;see&#8221;<\/td><td>Move the tooltip next to the anchor in the DOM, or use <code>position: fixed<\/code> \/ popover.<\/td><\/tr>\n<tr><td>Corner tooltip still goes off-screen<\/td><td>Only single-axis flips listed<\/td><td>Add <code>flip-block flip-inline<\/code> as an extra fallback.<\/td><\/tr>\n<\/tbody><\/table><\/div>\n\n<h3>Supporting older browsers<\/h3>\n\n<p>Some users are on older phones or company laptops that update slowly. Use <code>@supports<\/code> to give them a simple position first and upgrade everyone else:<\/p>\n\n<pre><code class=\"language-css\">\/* Default for old browsers: a simple, always-safe position *\/\n.tooltip {\n  position: absolute;\n  top: 100%;\n  left: 0;\n}\n\n\/* Upgrade when anchor positioning is available *\/\n@supports (anchor-name: --a) {\n  .tooltip {\n    top: auto;\n    left: auto;\n    position-anchor: --info;\n    position-area: top;\n    position-try-fallbacks: flip-block;\n  }\n}<\/code><\/pre>\n\n<p>There is also a community polyfill from OddBird if you must support older browsers fully, but it adds wrapper elements and does not handle anchors that are added later very well. For most sites, the <code>@supports<\/code> approach is simpler.<\/p>\n\n<h2 id=\"best-practices\">Best Practices<\/h2>\n\n<ul>\n<li><strong>Prefer <code>position-area<\/code> over <code>anchor()<\/code><\/strong> for normal tooltips and menus. It is shorter and flips cleanly.<\/li>\n<li><strong>Always add at least <code>flip-block<\/code><\/strong> to anything that can be near the screen edge.<\/li>\n<li><strong>Use popover for menus and click-to-open panels.<\/strong> You get Esc to close, light dismiss and top-layer rendering for free.<\/li>\n<li><strong>Keep accessibility in mind.<\/strong> CSS only positions things. Still use real <code>&lt;button&gt;<\/code> elements, show tooltips on <code>:focus-visible<\/code> as well as <code>:hover<\/code>, and link tooltips with <code>aria-describedby<\/code> where it helps.<\/li>\n<li><strong>Give anchor names a clear pattern<\/strong>, such as <code>--tip-*<\/code>, <code>--menu-*<\/code>, so your CSS stays easy to read.<\/li>\n<li><strong>Use spacing with margins<\/strong> (<code>margin-bottom: 8px<\/code> for a top tooltip) instead of hard-coded offsets. Margins flip correctly with fallbacks.<\/li>\n<li><strong>Test newer extras<\/strong> like <code>position-visibility<\/code> and <code>anchor-scope<\/code> in all browsers you support before relying on them.<\/li>\n<li><strong>Remove the JavaScript library<\/strong> only after checking your edge cases: scroll containers, right-to-left languages and small mobile screens.<\/li>\n<\/ul>\n\n<h2 id=\"conclusion\">Conclusion<\/h2>\n\n<p>CSS anchor positioning finally makes floating UI a CSS job. Name an anchor, point a positioned element at it, pick a cell with <code>position-area<\/code>, and add <code>position-try-fallbacks<\/code> so it flips at the screen edges. Combined with <code>popover<\/code>, you can build tooltips, dropdowns and hover cards with less code, fewer dependencies and smoother scrolling than the old JavaScript approach.<\/p>\n\n<p>Start small: replace one tooltip in your project this week, check it in Chrome, Safari and Firefox, then move on to your menus. Once you see how little code it takes, you will not want to go back.<\/p>\n\n<h2 id=\"faq\">FAQ<\/h2>\n\n<details><summary>Do I still need Floating UI or Popper.js?<\/summary><p>For most tooltips, dropdowns and hover cards, no. CSS anchor positioning plus <code>popover<\/code> covers placement, flipping and closing. You may still want a library for very complex cases, such as virtual elements, or if you must fully support old browsers.<\/p><\/details>\n\n<details><summary>Does the tooltip have to be a child of the anchor?<\/summary><p>No. That is the main benefit. The anchor and the positioned element just need to share a name. They can be siblings or far apart in the page, as long as the anchor is laid out before the positioned element and the browser can &#8220;see&#8221; it from the positioned element&#8217;s containing block.<\/p><\/details>\n\n<details><summary>What is the difference between position-area and anchor()?<\/summary><p><code>position-area<\/code> places the element into cells of a 3\u00d73 grid around the anchor and is best for everyday use. <code>anchor()<\/code> is a function used inside <code>top<\/code>, <code>left<\/code> and friends to line up exact edges, which is useful for precise alignment.<\/p><\/details>\n\n<details><summary>Can one element be attached to two anchors?<\/summary><p>Yes. With <code>anchor()<\/code> you can name the anchor directly, for example <code>left: anchor(--start right)<\/code> and <code>right: anchor(--end left)<\/code>, to stretch a box between two different elements.<\/p><\/details>\n\n<details><summary>Does it work with Tailwind CSS?<\/summary><p>Yes. You can use arbitrary properties such as <code>[anchor-name:--menu]<\/code> and <code>[position-anchor:--menu]<\/code>, or put the anchor rules in a small CSS file next to your components.<\/p><\/details>\n\n<details><summary>Is anchor positioning good for performance?<\/summary><p>Yes. The browser handles positioning during layout, so you avoid running JavaScript on every scroll and resize. That usually means smoother scrolling, especially on low-end phones.<\/p><\/details>\n\n<div class=\"dd-cta\">\n<h3>New posts every day on DevDojo<\/h3>\n<p>Practical, beginner-friendly guides on frontend, backend, AI and DevOps. Bookmark <a href=\"https:\/\/devdojo.co.in\/\">devdojo.co.in<\/a> and come back tomorrow for the next one. Have a question about anchor positioning? Drop it in the comments below.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Learn CSS anchor positioning step by step: build tooltips, dropdown menus and popovers without JavaScript using position-area, anchor() and flip fallbacks.<\/p>\n","protected":false},"author":1,"featured_media":199,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[91,92,96,94,93,95],"class_list":["post-200","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend","tag-css","tag-css-anchor-positioning","tag-frontend-tutorial","tag-popover-api","tag-tooltips","tag-web-development"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.2.1 - aioseo.com -->\n\t<meta name=\"description\" content=\"Learn CSS anchor positioning step by step: build tooltips, dropdown menus and popovers without JavaScript using position-area, anchor() and flip fallbacks.\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Lokendra\"\/>\n\t<link rel=\"canonical\" href=\"https:\/\/devdojo.co.in\/index.php\/2026\/10\/14\/css-anchor-positioning\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.2.1\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"DevDojo - Empowering Developers\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"CSS Anchor Positioning Tutorial: Tooltips and Menus Without JavaScript\" \/>\n\t\t<meta property=\"og:description\" content=\"Learn CSS anchor positioning step by step: build tooltips, dropdown menus and popovers without JavaScript using position-area, anchor() and flip fallbacks.\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/devdojo.co.in\/index.php\/2026\/10\/14\/css-anchor-positioning\/\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2026-10-14T15:33:54+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2026-10-14T15:33:54+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n\t\t<meta name=\"twitter:title\" content=\"CSS Anchor Positioning Tutorial: Tooltips and Menus Without JavaScript\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Learn CSS anchor positioning step by step: build tooltips, dropdown menus and popovers without JavaScript using position-area, anchor() and flip fallbacks.\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"BlogPosting\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/10\\\/14\\\/css-anchor-positioning\\\/#blogposting\",\"name\":\"CSS Anchor Positioning Tutorial: Tooltips Without JS\",\"headline\":\"CSS Anchor Positioning Tutorial: Tooltips and Menus Without JavaScript\",\"author\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/author\\\/lokendra\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/devdojo.co.in\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/css-anchor-positioning.jpg\",\"width\":1200,\"height\":630,\"caption\":\"CSS anchor positioning tutorial banner showing a button anchor with an attached tooltip, dropdown menu and card\"},\"datePublished\":\"2026-10-14T15:33:54+00:00\",\"dateModified\":\"2026-10-14T15:33:54+00:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/10\\\/14\\\/css-anchor-positioning\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/10\\\/14\\\/css-anchor-positioning\\\/#webpage\"},\"articleSection\":\"Frontend, CSS, CSS Anchor Positioning, Frontend Tutorial, Popover API, Tooltips, Web Development\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/10\\\/14\\\/css-anchor-positioning\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/devdojo.co.in\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/category\\\/frontend\\\/#listItem\",\"name\":\"Frontend\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/category\\\/frontend\\\/#listItem\",\"position\":2,\"name\":\"Frontend\",\"item\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/category\\\/frontend\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/10\\\/14\\\/css-anchor-positioning\\\/#listItem\",\"name\":\"CSS Anchor Positioning Tutorial: Tooltips and Menus Without JavaScript\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/10\\\/14\\\/css-anchor-positioning\\\/#listItem\",\"position\":3,\"name\":\"CSS Anchor Positioning Tutorial: Tooltips and Menus Without JavaScript\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/category\\\/frontend\\\/#listItem\",\"name\":\"Frontend\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/#organization\",\"name\":\"DevDojo\",\"description\":\"Empowering Developers\",\"url\":\"https:\\\/\\\/devdojo.co.in\\\/\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/author\\\/lokendra\\\/#author\",\"url\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/author\\\/lokendra\\\/\",\"name\":\"Lokendra\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/10\\\/14\\\/css-anchor-positioning\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/99f102f0cc9080237ce54b91304fd1b3b6fa29925cbaeba93cd796872e58b45c?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Lokendra\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/10\\\/14\\\/css-anchor-positioning\\\/#webpage\",\"url\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/10\\\/14\\\/css-anchor-positioning\\\/\",\"name\":\"CSS Anchor Positioning Tutorial: Tooltips Without JS\",\"description\":\"Learn CSS anchor positioning step by step: build tooltips, dropdown menus and popovers without JavaScript using position-area, anchor() and flip fallbacks.\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/10\\\/14\\\/css-anchor-positioning\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/author\\\/lokendra\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/author\\\/lokendra\\\/#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/devdojo.co.in\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/css-anchor-positioning.jpg\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/10\\\/14\\\/css-anchor-positioning\\\/#mainImage\",\"width\":1200,\"height\":630,\"caption\":\"CSS anchor positioning tutorial banner showing a button anchor with an attached tooltip, dropdown menu and card\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/10\\\/14\\\/css-anchor-positioning\\\/#mainImage\"},\"datePublished\":\"2026-10-14T15:33:54+00:00\",\"dateModified\":\"2026-10-14T15:33:54+00:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/#website\",\"url\":\"https:\\\/\\\/devdojo.co.in\\\/\",\"name\":\"DevDojo\",\"description\":\"Empowering Developers\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"CSS Anchor Positioning Tutorial: Tooltips Without JS","description":"Learn CSS anchor positioning step by step: build tooltips, dropdown menus and popovers without JavaScript using position-area, anchor() and flip fallbacks.","canonical_url":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/14\/css-anchor-positioning\/","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"BlogPosting","@id":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/14\/css-anchor-positioning\/#blogposting","name":"CSS Anchor Positioning Tutorial: Tooltips Without JS","headline":"CSS Anchor Positioning Tutorial: Tooltips and Menus Without JavaScript","author":{"@id":"https:\/\/devdojo.co.in\/index.php\/author\/lokendra\/#author"},"publisher":{"@id":"https:\/\/devdojo.co.in\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/devdojo.co.in\/wp-content\/uploads\/2026\/10\/css-anchor-positioning.jpg","width":1200,"height":630,"caption":"CSS anchor positioning tutorial banner showing a button anchor with an attached tooltip, dropdown menu and card"},"datePublished":"2026-10-14T15:33:54+00:00","dateModified":"2026-10-14T15:33:54+00:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/14\/css-anchor-positioning\/#webpage"},"isPartOf":{"@id":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/14\/css-anchor-positioning\/#webpage"},"articleSection":"Frontend, CSS, CSS Anchor Positioning, Frontend Tutorial, Popover API, Tooltips, Web Development"},{"@type":"BreadcrumbList","@id":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/14\/css-anchor-positioning\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/devdojo.co.in\/#listItem","position":1,"name":"Home","item":"https:\/\/devdojo.co.in\/","nextItem":{"@type":"ListItem","@id":"https:\/\/devdojo.co.in\/index.php\/category\/frontend\/#listItem","name":"Frontend"}},{"@type":"ListItem","@id":"https:\/\/devdojo.co.in\/index.php\/category\/frontend\/#listItem","position":2,"name":"Frontend","item":"https:\/\/devdojo.co.in\/index.php\/category\/frontend\/","nextItem":{"@type":"ListItem","@id":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/14\/css-anchor-positioning\/#listItem","name":"CSS Anchor Positioning Tutorial: Tooltips and Menus Without JavaScript"},"previousItem":{"@type":"ListItem","@id":"https:\/\/devdojo.co.in\/#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/14\/css-anchor-positioning\/#listItem","position":3,"name":"CSS Anchor Positioning Tutorial: Tooltips and Menus Without JavaScript","previousItem":{"@type":"ListItem","@id":"https:\/\/devdojo.co.in\/index.php\/category\/frontend\/#listItem","name":"Frontend"}}]},{"@type":"Organization","@id":"https:\/\/devdojo.co.in\/#organization","name":"DevDojo","description":"Empowering Developers","url":"https:\/\/devdojo.co.in\/"},{"@type":"Person","@id":"https:\/\/devdojo.co.in\/index.php\/author\/lokendra\/#author","url":"https:\/\/devdojo.co.in\/index.php\/author\/lokendra\/","name":"Lokendra","image":{"@type":"ImageObject","@id":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/14\/css-anchor-positioning\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/99f102f0cc9080237ce54b91304fd1b3b6fa29925cbaeba93cd796872e58b45c?s=96&d=mm&r=g","width":96,"height":96,"caption":"Lokendra"}},{"@type":"WebPage","@id":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/14\/css-anchor-positioning\/#webpage","url":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/14\/css-anchor-positioning\/","name":"CSS Anchor Positioning Tutorial: Tooltips Without JS","description":"Learn CSS anchor positioning step by step: build tooltips, dropdown menus and popovers without JavaScript using position-area, anchor() and flip fallbacks.","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/devdojo.co.in\/#website"},"breadcrumb":{"@id":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/14\/css-anchor-positioning\/#breadcrumblist"},"author":{"@id":"https:\/\/devdojo.co.in\/index.php\/author\/lokendra\/#author"},"creator":{"@id":"https:\/\/devdojo.co.in\/index.php\/author\/lokendra\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/devdojo.co.in\/wp-content\/uploads\/2026\/10\/css-anchor-positioning.jpg","@id":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/14\/css-anchor-positioning\/#mainImage","width":1200,"height":630,"caption":"CSS anchor positioning tutorial banner showing a button anchor with an attached tooltip, dropdown menu and card"},"primaryImageOfPage":{"@id":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/14\/css-anchor-positioning\/#mainImage"},"datePublished":"2026-10-14T15:33:54+00:00","dateModified":"2026-10-14T15:33:54+00:00"},{"@type":"WebSite","@id":"https:\/\/devdojo.co.in\/#website","url":"https:\/\/devdojo.co.in\/","name":"DevDojo","description":"Empowering Developers","inLanguage":"en-US","publisher":{"@id":"https:\/\/devdojo.co.in\/#organization"}}]},"og:locale":"en_US","og:site_name":"DevDojo - Empowering Developers","og:type":"article","og:title":"CSS Anchor Positioning Tutorial: Tooltips and Menus Without JavaScript","og:description":"Learn CSS anchor positioning step by step: build tooltips, dropdown menus and popovers without JavaScript using position-area, anchor() and flip fallbacks.","og:url":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/14\/css-anchor-positioning\/","article:published_time":"2026-10-14T15:33:54+00:00","article:modified_time":"2026-10-14T15:33:54+00:00","twitter:card":"summary_large_image","twitter:title":"CSS Anchor Positioning Tutorial: Tooltips and Menus Without JavaScript","twitter:description":"Learn CSS anchor positioning step by step: build tooltips, dropdown menus and popovers without JavaScript using position-area, anchor() and flip fallbacks."},"aioseo_meta_data":{"post_id":"200","title":"CSS Anchor Positioning Tutorial: Tooltips Without JS","description":"Learn CSS anchor positioning step by step: build tooltips, dropdown menus and popovers without JavaScript using position-area, anchor() and flip fallbacks.","keywords":null,"keyphrases":{"focus":{"keyphrase":"CSS anchor positioning"},"additional":[]},"primary_term":null,"canonical_url":null,"og_title":"CSS Anchor Positioning Tutorial: Tooltips and Menus Without JavaScript","og_description":"Learn CSS anchor positioning step by step: build tooltips, dropdown menus and popovers without JavaScript using position-area, anchor() and flip fallbacks.","og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":"","og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"BlogPosting","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":"-1","robots_max_videopreview":"-1","robots_max_imagepreview":"large","priority":0,"frequency":"default","local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":{"faqs":[],"keyPoints":[],"schemas":[],"titles":[],"descriptions":[],"socialPosts":{"email":{"subject":"","preview":"","content":""},"linkedin":[],"twitter":[],"facebook":[],"instagram":[]}},"created":"2026-10-14 13:06:41","updated":"2026-10-14 15:34:16","focus_keyword":"CSS anchor positioning","additional_keywords":null,"truseo_locale":null,"seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/devdojo.co.in\/\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">\u00bb<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/devdojo.co.in\/index.php\/category\/frontend\/\" title=\"Frontend\">Frontend<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">\u00bb<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tCSS Anchor Positioning Tutorial: Tooltips and Menus Without JavaScript\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/devdojo.co.in\/"},{"label":"Frontend","link":"https:\/\/devdojo.co.in\/index.php\/category\/frontend\/"},{"label":"CSS Anchor Positioning Tutorial: Tooltips and Menus Without JavaScript","link":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/14\/css-anchor-positioning\/"}],"_links":{"self":[{"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/posts\/200","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/comments?post=200"}],"version-history":[{"count":1,"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/posts\/200\/revisions"}],"predecessor-version":[{"id":201,"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/posts\/200\/revisions\/201"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/media\/199"}],"wp:attachment":[{"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/media?parent=200"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/categories?post=200"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/tags?post=200"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}