{"id":7514,"date":"2025-10-28T11:51:29","date_gmt":"2025-10-28T16:51:29","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=7514"},"modified":"2026-02-22T13:15:08","modified_gmt":"2026-02-22T18:15:08","slug":"perfectly-pointed-tooltips-a-foundation","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/perfectly-pointed-tooltips-a-foundation\/","title":{"rendered":"Perfectly Pointed Tooltips: A Foundation"},"content":{"rendered":"\n<p>Tooltips are a classic in web development. You click on an element, and a small bubble appears to display additional details. Behind that simple click, there tends to be JavaScript  performing calculations to determine the correct position for the tooltip. Let\u2019s try to place it at the top. Nope, not enough space. Let\u2019s try the bottom instead. It&#8217;s also touching the right edge so let\u2019s shift it a bit to the left. There is a lot that can go into making sure a tooltip is placed well without any cutoffs losing information.<\/p>\n\n\n\n<p>In this article, I will show you how to write good JavaScript that covers all the possibilities&#8230;<\/p>\n\n\n\n<p>Kidding! We&#8217;ll be using CSS and I will show how the modern <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_anchor_positioning\">anchor positioning API<\/a> can help us with all this. None of the weight and performance concerns of JavaScript here. <\/p>\n\n\n<div class=\"box article-series\">\n  <header>\n    <h3 class=\"article-series-header\">Article Series<\/h3>\n  <\/header>\n  <div class=\"box-content\">\n            <ol>\n                      <li>\n              <a href=\"https:\/\/frontendmasters.com\/blog\/perfectly-pointed-tooltips-a-foundation\/\">Perfectly Pointed Tooltips: A Foundation<\/a>\n            <\/li>\n                      <li>\n              <a href=\"https:\/\/frontendmasters.com\/blog\/perfectly-pointed-tooltips-all-four-sides\/\">Perfectly Pointed Tooltips: All Four Sides<\/a>\n            <\/li>\n                      <li>\n              <a href=\"https:\/\/frontendmasters.com\/blog\/perfectly-pointed-tooltips-to-the-corners\/\">Perfectly Pointed Tooltips: To The Corners<\/a>\n            <\/li>\n                  <\/ol>\n        <\/div>\n<\/div>\n\n\n\n<p class=\"learn-more\">At the time of writing, only Chrome and Edge have full support of the features we will be using.<\/p>\n\n\n\n<p>Let\u2019s start with a demo:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_RNrKmpY\" src=\"\/\/codepen.io\/anon\/embed\/RNrKmpY?height=450&amp;theme-id=1&amp;slug-hash=RNrKmpY&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed RNrKmpY\" title=\"CodePen Embed RNrKmpY\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Click-and-drag the anchor and see how the tooltip behaves. It will try to position itself in a way to remain visible and avoid any overflow. Cool, right? No JavaScript is used to position the tooltip (except the one for dragging the anchor, which is irrelevant to the trick).<\/p>\n\n\n\n<p>This is made possible thanks to the new&nbsp;<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_anchor_positioning\">Anchor Positioning API<\/a>&nbsp;and a few other tricks we will dissect together. We will also study more examples, so if you are new to anchor positioning, you are in the right place.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"the-initial-configuration\">The Initial Configuration<\/h2>\n\n\n\n<p>Let\u2019s start with the markup: An anchor element and its tooltip:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">'anchor'<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">'tooltip'<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>This isn&#8217;t interesting HTML, but it does showcase how the anchor and the tooltip are different elements that don&#8217;t need to be parent\/child. They can be anywhere in the DOM and the CSS can handle that (though, for practical and accessibility reasons, you may want to keep them close together and associate them).<\/p>\n\n\n\n<p>The HTML structure you use will depend on your use case and your type of content, so choose it carefully. In all cases, it\u2019s mainly one element for the anchor and another one for the tooltip.<\/p>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>Here is a demo taken from another&nbsp;<a href=\"https:\/\/frontendmasters.com\/blog\/custom-range-slider-using-anchor-positioning-scroll-driven-animations\/\">article<\/a>&nbsp;where the anchor is the thumb of a slider and the tooltip is an&nbsp;<code>&lt;output&gt;<\/code>&nbsp;element:<\/summary>\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_MWdmZPL\" src=\"\/\/codepen.io\/anon\/embed\/MWdmZPL?height=450&amp;theme-id=1&amp;slug-hash=MWdmZPL&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed MWdmZPL\" title=\"CodePen Embed MWdmZPL\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n<\/details>\n\n\n\n<p>The CSS:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-id\">#anchor<\/span> {\n  <span class=\"hljs-attribute\">anchor-name<\/span>: --anchor;\n}\n<span class=\"hljs-selector-id\">#tooltip<\/span> {\n  <span class=\"hljs-attribute\">position<\/span>: absolute; \n  <span class=\"hljs-attribute\">position-anchor<\/span>: --anchor;\n  <span class=\"hljs-attribute\">position-area<\/span>: top;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>We define the anchor using&nbsp;<code>anchor-name<\/code>, link the tooltip to the anchor using&nbsp;<code>position-anchor<\/code> (and a custom ident, the <code>--anchor<\/code> bit that looks like a custom property but is really just a unique name), and then we place it at the top using&nbsp;<code>position-area<\/code>. The tooltip needs to be absolutely positioned (which includes fixed position as well).<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_dPGVXyv\/3d23b6e554245a1321d299ccb5be725f\" src=\"\/\/codepen.io\/anon\/embed\/dPGVXyv\/3d23b6e554245a1321d299ccb5be725f?height=450&amp;theme-id=1&amp;slug-hash=dPGVXyv\/3d23b6e554245a1321d299ccb5be725f&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed dPGVXyv\/3d23b6e554245a1321d299ccb5be725f\" title=\"CodePen Embed dPGVXyv\/3d23b6e554245a1321d299ccb5be725f\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Nothing fancy so far. The tooltip is \u201calways\u201d placed at the top, whatever the anchor\u2019s position. You can drag the anchor to see the result.<\/p>\n\n\n\n<p>In this article we&#8217;ll use simple values for&nbsp;<code>position-area<\/code>, but this property can be very tricky.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"833\" height=\"622\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/10\/1hmIC9A1.png?resize=833%2C622&#038;ssl=1\" alt=\"A grid layout demo showing various cell configurations and an anchor icon with the text 'CSS Is Awesome' positioned at the top left.\" class=\"wp-image-7524\" srcset=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/10\/1hmIC9A1.png?w=833&amp;ssl=1 833w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/10\/1hmIC9A1.png?resize=300%2C224&amp;ssl=1 300w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/10\/1hmIC9A1.png?resize=768%2C573&amp;ssl=1 768w\" sizes=\"auto, (max-width: 833px) 100vw, 833px\" \/><figcaption class=\"wp-element-caption\">I\u2019ve created&nbsp;<a href=\"https:\/\/css-tip.com\/position-area\/\">an interactive demo<\/a>&nbsp;if you want to explore all the different values and understand how alignment works in the context of Anchor Positioning.<\/figcaption><\/figure>\n\n\n\n<p>Now that our tooltip is placed, let\u2019s add a small offset at the bottom to prepare the space for the tail. Using&nbsp;<code>bottom<\/code>&nbsp;will do the job.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-id\">#anchor<\/span> {\n  <span class=\"hljs-attribute\">anchor-name<\/span>: --anchor;\n}\n<span class=\"hljs-selector-id\">#tooltip<\/span> {\n  <span class=\"hljs-attribute\">--d<\/span>: <span class=\"hljs-number\">1em<\/span>; <span class=\"hljs-comment\">\/* distance between tooltip and anchor *\/<\/span>\n\n  <span class=\"hljs-attribute\">position<\/span>: absolute; \n  <span class=\"hljs-attribute\">position-anchor<\/span>: --anchor;\n  <span class=\"hljs-attribute\">position-area<\/span>: top;\n  <span class=\"hljs-attribute\">bottom<\/span>: <span class=\"hljs-built_in\">var<\/span>(--d);\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_YPwEVqm\/3786d23a4038ad465c536ff107f89b40\" src=\"\/\/codepen.io\/anon\/embed\/YPwEVqm\/3786d23a4038ad465c536ff107f89b40?height=450&amp;theme-id=1&amp;slug-hash=YPwEVqm\/3786d23a4038ad465c536ff107f89b40&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed YPwEVqm\/3786d23a4038ad465c536ff107f89b40\" title=\"CodePen Embed YPwEVqm\/3786d23a4038ad465c536ff107f89b40\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"making-the-position-dynamic\">Making the Position Dynamic<\/h2>\n\n\n\n<p>Let\u2019s move to the interesting part, where we will adjust the position of the tooltip to make it always visible and avoid any overflow. Anchor Positioning has native mechanisms to do this, and all we need to do is understand how to use them correctly.<\/p>\n\n\n\n<p>The first thing is to identify the containing block of the absolutely positioned element. We may intuitively think that the logic is to avoid a screen overflow, but that&#8217;s not the case. It\u2019s related to the containing block. This can be very confusing if you don\u2019t understand this part, so let&#8217;s look closely.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.w3.org\/TR\/css-anchor-position-1\/#fallback\">The specification:<\/a><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Anchor positioning, while powerful, can also be unpredictable. The anchor box might be anywhere on the page, so positioning a box in any particular fashion might result in the positioned box&nbsp;<strong>overflowing its containing block<\/strong>&nbsp;or being positioned partially off screen.<\/p>\n\n\n\n<p>To ameliorate this, an absolutely positioned box can use the position-try-fallbacks property to refer to several variant sets of positioning\/alignment properties that the UA can try if the box overflows its initial position. Each is applied to the box, one by one, and the first&nbsp;<strong>that doesn\u2019t cause the box to overflow its containing block<\/strong>&nbsp;is taken as the winner.<\/p>\n<\/blockquote>\n\n\n\n<p>As you can read, it\u2019s all about the containing block, and the containing block of an absolutely positioned element is the first ancestor with a position different from <code>static<\/code> (the default). If such element doesn\u2019t exist we consider&nbsp;<a href=\"https:\/\/css-tip.com\/initial-containing-block\/\">the initial containing block<\/a>.<\/p>\n\n\n\n<p>In our example, I am going to use the body as the containing block, and I will add a border and an offset from each side to better illustrate:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_OPMOwNO\/f147d5780b3a59d68963fc73f9ecc628\" src=\"\/\/codepen.io\/anon\/embed\/OPMOwNO\/f147d5780b3a59d68963fc73f9ecc628?height=600&amp;theme-id=1&amp;slug-hash=OPMOwNO\/f147d5780b3a59d68963fc73f9ecc628&amp;default-tab=result\" height=\"600\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed OPMOwNO\/f147d5780b3a59d68963fc73f9ecc628\" title=\"CodePen Embed OPMOwNO\/f147d5780b3a59d68963fc73f9ecc628\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Drag the anchor to the left or the right and see what happens. When the tooltip touches the edges, it stops, even if you can still move the anchor. It overflows the body only when the anchor is getting outside.<\/p>\n\n\n\n<p>The browser will initially place the tooltip at the top and centered. The priority is to remain withing the containing block, so if there isn\u2019t enough space to keep the center behavior, the tooltip is shifted. The second priority is to keep the anchor behavior, and in this case, the browser will allow the overflow if the anchor element is outside.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"228\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/10\/SW5hUi3K.png?resize=1024%2C228&#038;ssl=1\" alt=\"A three-part interactive demo showing a tooltip following an anchor element as it is dragged. The tooltip displays the message 'Drag the anchor and I should follow...' with an anchor icon below.\" class=\"wp-image-7526\" srcset=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/10\/SW5hUi3K.png?resize=1024%2C228&amp;ssl=1 1024w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/10\/SW5hUi3K.png?resize=300%2C67&amp;ssl=1 300w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/10\/SW5hUi3K.png?resize=768%2C171&amp;ssl=1 768w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/10\/SW5hUi3K.png?w=1155&amp;ssl=1 1155w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p>Assuming the anchor will remain within the body area, we already have what we want without too much effort. The tooltip will never overflow from the right, left, or bottom side. What remains is the top.<\/p>\n\n\n\n<p>By default, the browser can shift the element within the area defined by&nbsp;<code>position-area<\/code>, but cannot do more than that. We need to instruct the browser on how to handle the other cases. For this, we use&nbsp;<code>position-try-fallbacks<\/code>&nbsp;where we define different positions for the browser to \u201ctry\u201d in case the element doesn\u2019t fit its containing block.<\/p>\n\n\n\n<p>Let\u2019s define a bottom position:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">position-try-fallbacks<\/span>: <span class=\"hljs-selector-tag\">bottom<\/span>;<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Drag the anchor to the top and see what happens:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_PwZOyZq\/9d219216c3796b403fef47c3789f1f9a\" src=\"\/\/codepen.io\/anon\/embed\/PwZOyZq\/9d219216c3796b403fef47c3789f1f9a?height=600&amp;theme-id=1&amp;slug-hash=PwZOyZq\/9d219216c3796b403fef47c3789f1f9a&amp;default-tab=result\" height=\"600\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed PwZOyZq\/9d219216c3796b403fef47c3789f1f9a\" title=\"CodePen Embed PwZOyZq\/9d219216c3796b403fef47c3789f1f9a\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Now, when the tooltip overflows the body from the top, the position becomes \u201cbottom\u201d. It will also remain bottom until the tooltip overflows again from the bottom. In other words, when the browser picks a position after an overflow, it keeps it until a new overflow happens.<\/p>\n\n\n\n<p>That\u2019s all, we are done! Now our tooltip is perfectly placed, whatever the anchor position.<\/p>\n\n\n\n<p class=\"learn-more\">But we no longer have the gap when the position is at the bottom (for the future arrow). How do we fix that?<\/p>\n\n\n\n<p>We told the browser to only change the value of&nbsp;<code>position-area<\/code>&nbsp;to&nbsp;<code>bottom<\/code>, but we can do better by using:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">position-try-fallbacks<\/span>: <span class=\"hljs-selector-tag\">flip-block<\/span>;<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>\u201cBlock\u201d refers to the block axis (the vertical axis in our default writing mode), and this instruction means flip the position across the vertical axis. The logic is to mirror the initial position on the other side. To do this the browser needs to update different properties in addition to&nbsp;<code>position-area<\/code>.<\/p>\n\n\n\n<p>In the example we&#8217;ve defined&nbsp;<code>position-area: top<\/code>&nbsp;and&nbsp;<code>bottom: var(--d)<\/code>. With <code>position-try-fallbacks: flip-block<\/code> in place, when that flip happens, it&#8217;s as if we defined&nbsp;<code>position-area: bottom<\/code>&nbsp;and&nbsp;<code>top: var(--d)<\/code>. We keep the gap!<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_wBMPYoz\/8c205a744b8bc456ecd01b2728d9f8d3\" src=\"\/\/codepen.io\/anon\/embed\/wBMPYoz\/8c205a744b8bc456ecd01b2728d9f8d3?height=600&amp;theme-id=1&amp;slug-hash=wBMPYoz\/8c205a744b8bc456ecd01b2728d9f8d3&amp;default-tab=result\" height=\"600\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed wBMPYoz\/8c205a744b8bc456ecd01b2728d9f8d3\" title=\"CodePen Embed wBMPYoz\/8c205a744b8bc456ecd01b2728d9f8d3\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>If you are a bit lost and confused, don\u2019t worry. We are dealing with new mechanisms not common to the CSS world so it may take time to click for you.<\/p>\n\n\n\n<p>To sum up, we can either instruct the browser to update only the&nbsp;<code>position-area<\/code>&nbsp;by defining a new position or to \u201cflip\u201d the actual position across one axis which will update different properties.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"adding-the-tail\">Adding The Tail<\/h2>\n\n\n\n<p>Adding a tail to a tooltip is pretty straightforward (I even have a&nbsp;<a href=\"https:\/\/css-generators.com\/tooltip-speech-bubble\/\">collection of 100 different designs<\/a>), but changing the direction of the tail based on the position is a bit tricky.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"940\" height=\"230\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/10\/aAotEaeC.png?resize=940%2C230&#038;ssl=1\" alt=\"Three tooltip examples illustrating text that says 'Drag the anchor and I should follow...' with an anchor icon, showcasing dynamic positioning.\" class=\"wp-image-7527\" srcset=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/10\/aAotEaeC.png?w=940&amp;ssl=1 940w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/10\/aAotEaeC.png?resize=300%2C73&amp;ssl=1 300w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/10\/aAotEaeC.png?resize=768%2C188&amp;ssl=1 768w\" sizes=\"auto, (max-width: 940px) 100vw, 940px\" \/><\/figure>\n\n\n\n<p>For now, Anchor Positioning doesn\u2019t offer a way to update the CSS based on the position, but we can still use the existing features to \u201chack\u201d it. Hacking with CSS can be fun! <\/p>\n\n\n\n<p>I am going to rely on the \u201cflip\u201d feature and the fact that it can update the margin to achieve the final result.<\/p>\n\n\n\n<p>First, I will consider a pseudo-element to create the tail shape:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-id\">#tooltip<\/span> {\n  <span class=\"hljs-attribute\">--d<\/span>: <span class=\"hljs-number\">1em<\/span>; <span class=\"hljs-comment\">\/* distance between tooltip and anchor *\/<\/span>\n  <span class=\"hljs-attribute\">--s<\/span>: <span class=\"hljs-number\">1.2em<\/span>; <span class=\"hljs-comment\">\/* tail size *\/<\/span>\n}\n<span class=\"hljs-selector-id\">#tooltip<\/span><span class=\"hljs-selector-pseudo\">::before<\/span> {\n  <span class=\"hljs-attribute\">content<\/span>: <span class=\"hljs-string\">\"\"<\/span>;\n  <span class=\"hljs-attribute\">position<\/span>: absolute;\n  <span class=\"hljs-attribute\">z-index<\/span>: -<span class=\"hljs-number\">1<\/span>;\n  <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-built_in\">var<\/span>(--s);\n  <span class=\"hljs-attribute\">background<\/span>: inherit;\n  <span class=\"hljs-attribute\">inset<\/span>: <span class=\"hljs-built_in\">calc<\/span>(-<span class=\"hljs-number\">1<\/span>*var(--d)) <span class=\"hljs-number\">0<\/span>;\n  <span class=\"hljs-attribute\">left<\/span>: <span class=\"hljs-built_in\">calc<\/span>(<span class=\"hljs-number\">50%<\/span> - var(--s)\/<span class=\"hljs-number\">2<\/span>);\n  <span class=\"hljs-attribute\">clip-path<\/span>: <span class=\"hljs-built_in\">polygon<\/span>(<span class=\"hljs-number\">50%<\/span> .<span class=\"hljs-number\">2em<\/span>,<span class=\"hljs-number\">100%<\/span> var(--d),<span class=\"hljs-number\">100%<\/span> <span class=\"hljs-built_in\">calc<\/span>(<span class=\"hljs-number\">100%<\/span> - var(--d)),<span class=\"hljs-number\">50%<\/span> <span class=\"hljs-built_in\">calc<\/span>(<span class=\"hljs-number\">100%<\/span> - .<span class=\"hljs-number\">2em<\/span>),<span class=\"hljs-number\">0<\/span> <span class=\"hljs-built_in\">calc<\/span>(<span class=\"hljs-number\">100%<\/span> - var(--d)),<span class=\"hljs-number\">0<\/span> <span class=\"hljs-built_in\">var<\/span>(--d));\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_NPxyqed\/c294510211f0e6263189bcf742b40109\" src=\"\/\/codepen.io\/anon\/embed\/NPxyqed\/c294510211f0e6263189bcf742b40109?height=600&amp;theme-id=1&amp;slug-hash=NPxyqed\/c294510211f0e6263189bcf742b40109&amp;default-tab=result\" height=\"600\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed NPxyqed\/c294510211f0e6263189bcf742b40109\" title=\"CodePen Embed NPxyqed\/c294510211f0e6263189bcf742b40109\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Both tails are visible by default. Click \u201cdebug mode\u201d to better understand the shape and how it\u2019s placed.<\/p>\n\n\n\n<p>When the tooltip is at the top, we need to hide the top part. For this, we can use a&nbsp;<code>margin-top<\/code>&nbsp;on the pseudo-element equal to variable&nbsp;<code>--d<\/code>. And when the tooltip is at the bottom, we need&nbsp;<code>margin-bottom<\/code>.<\/p>\n\n\n\n<p>I am going to define the <code>margin<\/code> on the tooltip element and then inherit it on pseudo-element:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-id\">#tooltip<\/span> {\n  <span class=\"hljs-attribute\">--d<\/span>: <span class=\"hljs-number\">1em<\/span>; <span class=\"hljs-comment\">\/* distance between tooltip and anchor *\/<\/span>\n  <span class=\"hljs-attribute\">--s<\/span>: <span class=\"hljs-number\">1.2em<\/span>; <span class=\"hljs-comment\">\/* tail size *\/<\/span>\n\n  <span class=\"hljs-attribute\">margin-top<\/span>: <span class=\"hljs-built_in\">var<\/span>(--d);\n}\n<span class=\"hljs-selector-id\">#tooltip<\/span><span class=\"hljs-selector-pseudo\">::before<\/span> {\n  <span class=\"hljs-attribute\">margin<\/span>: inherit;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_wBMyaZo\/a566cce0210278e61b88b37fda345404\" src=\"\/\/codepen.io\/anon\/embed\/wBMyaZo\/a566cce0210278e61b88b37fda345404?height=600&amp;theme-id=1&amp;slug-hash=wBMyaZo\/a566cce0210278e61b88b37fda345404&amp;default-tab=result\" height=\"600\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed wBMyaZo\/a566cce0210278e61b88b37fda345404\" title=\"CodePen Embed wBMyaZo\/a566cce0210278e61b88b37fda345404\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Tada. Our tooltip is now perfect! The use of margin will hide one side keeping one tail visible at a time.<\/p>\n\n\n\n<p class=\"learn-more\">But we didn\u2019t define <code>margin-bottom<\/code>. How does it work for the bottom position?<\/p>\n\n\n\n<p>That\u2019s the \u201cflip\u201d feature. Remember what we did with the gap where we only defined&nbsp;<code>top<\/code>&nbsp;and&nbsp;<code>flip-block<\/code>&nbsp;changed it to&nbsp;<code>bottom<\/code>? The same logic applies here with margin: the&nbsp;<code>margin-top<\/code>&nbsp;automatically becomes a&nbsp;<code>margin-bottom<\/code>&nbsp;when the position is flipped! Cool, right?<\/p>\n\n\n\n<p>Note that using margin will cause the tooltip to flip a bit earlier since margin is part of the element, and the logic is to prevent the overflow of the \u201cmargin box\u201d. It\u2019s not a big deal in our example; it\u2019s nicer to flip the position before it touches the edges.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"moving-the-tail\">Moving The Tail<\/h2>\n\n\n\n<p>The top and bottom parts are good, but we still need to fix the cases where the tooltip shifts when it\u2019s close to the left and right edges. The tail needs to follow the anchor. For this, we have to update the left value and make it follow the anchor position.<\/p>\n\n\n\n<p>Instead of:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">left<\/span>: <span class=\"hljs-selector-tag\">calc<\/span>(50% <span class=\"hljs-selector-tag\">-<\/span> <span class=\"hljs-selector-tag\">var<\/span>(<span class=\"hljs-selector-tag\">--s<\/span>));<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>We use:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">left<\/span>: <span class=\"hljs-selector-tag\">calc<\/span>(<span class=\"hljs-selector-tag\">anchor<\/span>(<span class=\"hljs-selector-tag\">--anchor<\/span> <span class=\"hljs-selector-tag\">center<\/span>) <span class=\"hljs-selector-tag\">-<\/span> <span class=\"hljs-selector-tag\">var<\/span>(<span class=\"hljs-selector-tag\">--s<\/span>)\/2); <\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>I replace&nbsp;<code>50%<\/code>, which refers to the center of the tooltip element, with&nbsp;<code>anchor(--anchor center)<\/code>, which is the center of the anchor element.<\/p>\n\n\n\n<p>The&nbsp;<code>anchor()<\/code>&nbsp;function is another cool feature of Anchor Positioning. It allows us to query a position from any anchor element and use it to place an absolutely positioned element.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_JoGpKqG\/5400b1b644c403d21503b6e3d09bb7a5\" src=\"\/\/codepen.io\/anon\/embed\/JoGpKqG\/5400b1b644c403d21503b6e3d09bb7a5?height=600&amp;theme-id=1&amp;slug-hash=JoGpKqG\/5400b1b644c403d21503b6e3d09bb7a5&amp;default-tab=result\" height=\"600\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed JoGpKqG\/5400b1b644c403d21503b6e3d09bb7a5\" title=\"CodePen Embed JoGpKqG\/5400b1b644c403d21503b6e3d09bb7a5\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p><em>Uh oh \u2014 that doesn&#8217;t work. <\/em>I&#8217;ve left this in though, as it&#8217;s an educational moment we need to look at.<\/p>\n\n\n\n<p>We hit one of the trickiest issues of Anchor Positioning. In theory, any element on the page can be an anchor using\u00a0<code>anchor-name<\/code>\u00a0and any other element can position itself relative to that anchor. That\u2019s the main purpose of the feature, but there are exceptions where an element cannot reference an anchor. I am detailing all the cases in the following post:\u00a0<a href=\"https:\/\/css-tip.com\/anchor-issues\/\">Why is Anchor Positioning not working?<\/a><\/p>\n\n\n\n<p>In our example, the pseudo-element (the tail) is a child of the tooltip,\u00a0which is an absolutely positioned element. This makes the tooltip the containing block of the pseudo-element and prevents it from seeing any anchor defined outside it. (If you think z-index and stacking context are hard, get ready for this)<\/p>\n\n\n\n<p>To overcome this, I will update the position of the pseudo-element to fixed. This changes its containing block (the viewport at the moment) and makes it able to see the anchor element.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_WbrMGea\/e6b7eea828db4831cb5872929744018d\" src=\"\/\/codepen.io\/anon\/embed\/WbrMGea\/e6b7eea828db4831cb5872929744018d?height=600&amp;theme-id=1&amp;slug-hash=WbrMGea\/e6b7eea828db4831cb5872929744018d&amp;default-tab=result\" height=\"600\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed WbrMGea\/e6b7eea828db4831cb5872929744018d\" title=\"CodePen Embed WbrMGea\/e6b7eea828db4831cb5872929744018d\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Yes, the demo is broken, but drag the anchor close to the edges and see how the tail is correctly placed horizontally as it\u2019s now able to \u201csee\u201d the anchor element. However, the pseudo-element now has a fixed position so it can no longer be placed relatively to its parent element, the tooltip. To fix this we can make the tooltip an anchor element as well, so the pseudo-element can reference it.<\/p>\n\n\n\n<p>In the end we need <em>two<\/em> anchors:&nbsp;<code>#anchor<\/code>&nbsp;and&nbsp;<code>#tooltip<\/code>. The tooltip is positioned relatively to the anchor, and the tail is positioned relatively to both the anchor and the tooltip.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-10\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-id\">#anchor<\/span> {\n  <span class=\"hljs-attribute\">position<\/span>: absolute;\n  <span class=\"hljs-attribute\">anchor-name<\/span>: --anchor;\n}\n<span class=\"hljs-selector-id\">#tooltip<\/span> {\n  <span class=\"hljs-attribute\">--d<\/span>: <span class=\"hljs-number\">1em<\/span>;  <span class=\"hljs-comment\">\/* distance between anchor and tooltip  *\/<\/span>\n  <span class=\"hljs-attribute\">--s<\/span>: <span class=\"hljs-number\">1.2em<\/span>; <span class=\"hljs-comment\">\/* tail size *\/<\/span>\n  \n  <span class=\"hljs-attribute\">position<\/span>: absolute; \n  <span class=\"hljs-attribute\">position-anchor<\/span>: --anchor;\n  <span class=\"hljs-attribute\">anchor-name<\/span>: --tooltip;\n}\n<span class=\"hljs-comment\">\/* the tail *\/<\/span>\n<span class=\"hljs-selector-id\">#tooltip<\/span><span class=\"hljs-selector-pseudo\">:before<\/span> {\n  <span class=\"hljs-attribute\">content<\/span>: <span class=\"hljs-string\">\"\"<\/span>;\n  <span class=\"hljs-attribute\">position<\/span>: fixed;\n  <span class=\"hljs-attribute\">z-index<\/span>: -<span class=\"hljs-number\">1<\/span>;\n  <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-built_in\">var<\/span>(--s);\n  <span class=\"hljs-comment\">\/* vertical position from tooltip  *\/<\/span>\n  <span class=\"hljs-attribute\">top<\/span>:    <span class=\"hljs-built_in\">calc<\/span>(anchor(--tooltip top   ) - <span class=\"hljs-built_in\">var<\/span>(--d));\n  <span class=\"hljs-attribute\">bottom<\/span>: <span class=\"hljs-built_in\">calc<\/span>(anchor(--tooltip bottom) - <span class=\"hljs-built_in\">var<\/span>(--d));\n  <span class=\"hljs-comment\">\/* horizontal position from anchor *\/<\/span>\n  <span class=\"hljs-attribute\">left<\/span>: <span class=\"hljs-built_in\">calc<\/span>(anchor(--anchor center) - <span class=\"hljs-built_in\">var<\/span>(--s)\/<span class=\"hljs-number\">2<\/span>);\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-10\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Thanks to&nbsp;<code>anchor()<\/code>, I can retrieve the top and bottom edges of the tooltip element and the center of the anchor element to correctly position the pseudo-element.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_bNELwpm\/33874b6400c29f3a36f563fb8f5c7d91\" src=\"\/\/codepen.io\/anon\/embed\/bNELwpm\/33874b6400c29f3a36f563fb8f5c7d91?height=600&amp;theme-id=1&amp;slug-hash=bNELwpm\/33874b6400c29f3a36f563fb8f5c7d91&amp;default-tab=result\" height=\"600\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed bNELwpm\/33874b6400c29f3a36f563fb8f5c7d91\" title=\"CodePen Embed bNELwpm\/33874b6400c29f3a36f563fb8f5c7d91\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Our tooltip is now perfect! As I mentioned in the introduction, this CSS is not particularly complex. We barely used 20 declarations.<\/p>\n\n\n\n<p class=\"learn-more\">What if we want to start with the bottom position?<\/p>\n\n\n\n<p>Easy! You simply change the initial configuration to consider the bottom position and&nbsp;<code>flip-block<\/code>&nbsp;will switch to the top one when there is an overflow.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-11\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-id\">#tooltip<\/span> {\n  <span class=\"hljs-attribute\">position-area<\/span>: bottom; <span class=\"hljs-comment\">\/* instead of position-area: top; *\/<\/span>\n  <span class=\"hljs-attribute\">top<\/span>: <span class=\"hljs-built_in\">var<\/span>(--d); <span class=\"hljs-comment\">\/* instead of bottom: var(--d); *\/<\/span>\n  <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-built_in\">var<\/span>(--d); <span class=\"hljs-comment\">\/* margin-top: var(--d) *\/<\/span>\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-11\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_WbrzJKP\/d7d0c8a185d859e8178cd2aa5350192b\" src=\"\/\/codepen.io\/anon\/embed\/WbrzJKP\/d7d0c8a185d859e8178cd2aa5350192b?height=600&amp;theme-id=1&amp;slug-hash=WbrzJKP\/d7d0c8a185d859e8178cd2aa5350192b&amp;default-tab=result\" height=\"600\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed WbrzJKP\/d7d0c8a185d859e8178cd2aa5350192b\" title=\"CodePen Embed WbrzJKP\/d7d0c8a185d859e8178cd2aa5350192b\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusion\">Conclusion<\/h2>\n\n\n\n<p>That\u2019s all for this first part. We learned how to place a tooltip using&nbsp;<code>position-area<\/code>&nbsp;and how to defined a fallback position when an overflow occurs. Not to mention the flip feature and the use of the&nbsp;<code>anchor()<\/code>&nbsp;function.<\/p>\n\n\n\n<p>In the second part, we will increase the difficulty by working with more than two positions. Take the time to digest this first part before moving to the next one I also invite you to spend a few minutes on&nbsp;<a href=\"https:\/\/css-tip.com\/position-area\/\">my interactive demo of&nbsp;<code>position-area<\/code><\/a>&nbsp;to familiarize yourself with it.<\/p>\n\n\n<div class=\"box article-series\">\n  <header>\n    <h3 class=\"article-series-header\">Article Series<\/h3>\n  <\/header>\n  <div class=\"box-content\">\n            <ol>\n                      <li>\n              <a href=\"https:\/\/frontendmasters.com\/blog\/perfectly-pointed-tooltips-a-foundation\/\">Perfectly Pointed Tooltips: A Foundation<\/a>\n            <\/li>\n                      <li>\n              <a href=\"https:\/\/frontendmasters.com\/blog\/perfectly-pointed-tooltips-all-four-sides\/\">Perfectly Pointed Tooltips: All Four Sides<\/a>\n            <\/li>\n                      <li>\n              <a href=\"https:\/\/frontendmasters.com\/blog\/perfectly-pointed-tooltips-to-the-corners\/\">Perfectly Pointed Tooltips: To The Corners<\/a>\n            <\/li>\n                  <\/ol>\n        <\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>The Anchor Positioning API in CSS is very powerful. This is the beginning of a series where we understand it through the perfect use-case: tooltips.<\/p>\n","protected":false},"author":12,"featured_media":7548,"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":[1],"tags":[121,7,417],"class_list":["post-7514","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-post","tag-anchor","tag-css","tag-tooltips"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/10\/Perfectly-Pointed-Tooltips_-A-Foundation-2.jpg?fit=1140%2C676&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/7514","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\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=7514"}],"version-history":[{"count":19,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/7514\/revisions"}],"predecessor-version":[{"id":8722,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/7514\/revisions\/8722"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/7548"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=7514"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=7514"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=7514"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}