{"id":7714,"date":"2025-11-10T10:04:33","date_gmt":"2025-11-10T15:04:33","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=7714"},"modified":"2026-02-22T14:37:01","modified_gmt":"2026-02-22T19:37:01","slug":"perfectly-pointed-tooltips-to-the-corners","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/perfectly-pointed-tooltips-to-the-corners\/","title":{"rendered":"Perfectly Pointed Tooltips: To The Corners"},"content":{"rendered":"\n<p>Ready for the last challenge? <\/p>\n\n\n\n<p>We are still creating tooltips that follow their anchors, and this time we will work with new positions and learn new tricks. I will assume you have read and understood the first two parts, as I will skip the things I already explained there. Fair warning, if you haven&#8217;t read those first two you might get a little lost.<\/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>As usual, a demo of what we are making:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_yyepRJM\" src=\"\/\/codepen.io\/anon\/embed\/yyepRJM?height=650&amp;theme-id=1&amp;slug-hash=yyepRJM&amp;default-tab=result\" height=\"650\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed yyepRJM\" title=\"CodePen Embed yyepRJM\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>This time, instead of considering the sides, I am considering the <em>corners<\/em>. This is another common pattern in the tooltip world. The code structure and the initial configuration remain the same as in the previous examples, so let\u2019s jump straight into the new stuff.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"defining-the-positions\">Defining The Positions<\/h2>\n\n\n\n<p>If you took the time to explore <a href=\"https:\/\/css-tip.com\/position-area\/\">my interactive demo<\/a>, you already know the position we will start with:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">position-area<\/span>: <span class=\"hljs-selector-tag\">top<\/span> <span class=\"hljs-selector-tag\">left<\/span>;<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><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>The other positions will logically be&nbsp;<code>top right<\/code>,&nbsp;<code>bottom left<\/code>, and&nbsp;<code>bottom right<\/code>. We already learned that defining explicit positions is not the ideal choice, so let\u2019s flip!<\/p>\n\n\n\n<p>The flipped values are:<\/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-tag\">position-try-fallbacks<\/span>: <span class=\"hljs-selector-tag\">flip-inline<\/span>, <span class=\"hljs-selector-tag\">flip-block<\/span>, <span class=\"hljs-selector-tag\">flip-block<\/span> <span class=\"hljs-selector-tag\">flip-inline<\/span>; <\/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<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_qEbMJaB\/e2e08449673063ab85d747195fadab84\" src=\"\/\/codepen.io\/anon\/embed\/qEbMJaB\/e2e08449673063ab85d747195fadab84?height=650&amp;theme-id=1&amp;slug-hash=qEbMJaB\/e2e08449673063ab85d747195fadab84&amp;default-tab=result\" height=\"650\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed qEbMJaB\/e2e08449673063ab85d747195fadab84\" title=\"CodePen Embed qEbMJaB\/e2e08449673063ab85d747195fadab84\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>The advantage of this configuration is that we are not using&nbsp;<code>flip-start<\/code>, so we can safely define&nbsp;<code>min-width<\/code>&nbsp;(or&nbsp;<code>max-height<\/code>) without issue. The drawback is that adding the tail is complex. It needs to be placed on the corners, and the <code>margin<\/code> trick won\u2019t work. We need another hack.<\/p>\n\n\n\n<p>Notice how I am using&nbsp;<code>margin<\/code>&nbsp;instead of&nbsp;<code>inset<\/code>&nbsp;to control the gap between the tooltip and the anchor. Both are correct, but you will see later why&nbsp;<code>margin<\/code>&nbsp;is slightly better in my use case.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"adding-the-tail\">Adding The Tail<\/h2>\n\n\n\n<p>In the previous examples, the logic is to draw a shape with all the tails, then hide the non-needed parts. The tail has the same color as the tooltip and is placed behind its content, so we can only see what is outside the boundary of the tooltip.<\/p>\n\n\n\n<p>This time, I will use a slightly different idea. I am still drawing a shape with all the tails, but the hiding technique will be different.<\/p>\n\n\n\n<p>First, we place the pseudo-element of the tooltip above the anchor. Not on the top of it, but both will overlap each other.<\/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\">#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\">position-anchor<\/span>: --anchor;\n  <span class=\"hljs-attribute\">position-area<\/span>: center;\n  <span class=\"hljs-attribute\">width<\/span>:  <span class=\"hljs-built_in\">anchor-size<\/span>(width);\n  <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-built_in\">anchor-size<\/span>(height);\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<p>I am using a fixed position to be able to \u201csee\u201d the anchor (we talked about this quirk in the first article). Then, I place the element in the center area, which means <em>above<\/em> the anchor element&nbsp;(or&nbsp;<em>below<\/em>&nbsp;it depending on the z-index).<\/p>\n\n\n\n<p>I am introducing a new function, <code>anchor-size()<\/code>, which is part of the Anchor Positioning API. We saw the <code>anchor()<\/code> function, which allows us to query the position from an anchor element. <code>anchor-size()<\/code>does the same but with the sizes. I am using it to make the pseudo-element have the same size as the anchor. It\u2019s like using <code>width: 100%<\/code> where 100% refers to the anchor.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_GgoXYEm\/6a9941499d255d6f17eabc652e2d3520\" src=\"\/\/codepen.io\/anon\/embed\/GgoXYEm\/6a9941499d255d6f17eabc652e2d3520?height=650&amp;theme-id=1&amp;slug-hash=GgoXYEm\/6a9941499d255d6f17eabc652e2d3520&amp;default-tab=result\" height=\"650\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed GgoXYEm\/6a9941499d255d6f17eabc652e2d3520\" title=\"CodePen Embed GgoXYEm\/6a9941499d255d6f17eabc652e2d3520\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Nothing fancy so far. We have a square behind the anchor.<\/p>\n\n\n\n<p>Let\u2019s increase the size a little so it also touches the tooltip. We add twice the gap defined by the variable <code>--d<\/code> plus the value of <code>--s<\/code>, which controls both the radius and the size of the tooltip.<\/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-id\">#tooltip<\/span> {\n  <span class=\"hljs-attribute\">--d<\/span>: .<span class=\"hljs-number\">5em<\/span>; <span class=\"hljs-comment\">\/* distance between anchor and tooltip *\/<\/span>\n  <span class=\"hljs-attribute\">--s<\/span>: .<span class=\"hljs-number\">8em<\/span>; <span class=\"hljs-comment\">\/* tail size &amp; border-radius *\/<\/span> \n}\n\n<span class=\"hljs-selector-id\">#tooltip<\/span><span class=\"hljs-selector-pseudo\">:before<\/span> {\n  <span class=\"hljs-attribute\">width<\/span>:  <span class=\"hljs-built_in\">calc<\/span>(anchor-size(width) +  <span class=\"hljs-number\">2<\/span>*(<span class=\"hljs-built_in\">var<\/span>(--d) + <span class=\"hljs-built_in\">var<\/span>(--s)));\n  <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-built_in\">calc<\/span>(anchor-size(height) + <span class=\"hljs-number\">2<\/span>*(<span class=\"hljs-built_in\">var<\/span>(--d) + <span class=\"hljs-built_in\">var<\/span>(--s)));\n}<\/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<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_azdaREb\/8a8b73c39e710efb09ddb8770c7e2f13\" src=\"\/\/codepen.io\/anon\/embed\/azdaREb\/8a8b73c39e710efb09ddb8770c7e2f13?height=650&amp;theme-id=1&amp;slug-hash=azdaREb\/8a8b73c39e710efb09ddb8770c7e2f13&amp;default-tab=result\" height=\"650\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed azdaREb\/8a8b73c39e710efb09ddb8770c7e2f13\" title=\"CodePen Embed azdaREb\/8a8b73c39e710efb09ddb8770c7e2f13\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>It seems we are going nowhere with this idea but, believe me, we are almost there.<\/p>\n\n\n\n<p>Now we sculpt the pseudo-element to have the shape of a tail on each corner, like illustrated below:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"703\" height=\"290\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/11\/1NKKeR9u.png?resize=703%2C290&#038;ssl=1\" alt=\"Illustration showing a blue square transitioning into a tooltip design with four symmetrical tails around a centered anchor icon.\" class=\"wp-image-7717\" style=\"width:592px;height:auto\" srcset=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/11\/1NKKeR9u.png?w=703&amp;ssl=1 703w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/11\/1NKKeR9u.png?resize=300%2C124&amp;ssl=1 300w\" sizes=\"auto, (max-width: 703px) 100vw, 703px\" \/><\/figure>\n<\/div>\n\n\n<p>I am using a somewhat verbose <code>clip-path<\/code> value to create the final shape but the method used is not particularly important. You can consider gradients, SVG background, the new&nbsp;<code>shape()<\/code>&nbsp;function, etc. Perhaps you would also like to have a different design for the tails. The main idea is to have four tails around the anchor.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_qEbMJyZ\/697ca7237cf0ead2eb30cec3714dd05d\" src=\"\/\/codepen.io\/anon\/embed\/qEbMJyZ\/697ca7237cf0ead2eb30cec3714dd05d?height=650&amp;theme-id=1&amp;slug-hash=qEbMJyZ\/697ca7237cf0ead2eb30cec3714dd05d&amp;default-tab=result\" height=\"650\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed qEbMJyZ\/697ca7237cf0ead2eb30cec3714dd05d\" title=\"CodePen Embed qEbMJyZ\/697ca7237cf0ead2eb30cec3714dd05d\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Do you start to see the tricks? We have the correct position for the tails (you can drag the anchor and see the result), but we still have to hide the extra ones.<\/p>\n\n\n\n<p>All we need is to add one line of code to the tooltip:<\/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\">clip-path<\/span>: <span class=\"hljs-selector-tag\">inset<\/span>(0) <span class=\"hljs-selector-tag\">margin-box<\/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>I know it\u2019s not very intuitive but the explanation is fairly simple. Even if the pseudo-element is using a fixed position and has lost its relation with the tooltip, it remains part of its content, so clipping the tooltip will also affect the pseudo-element.<\/p>\n\n\n\n<p>In our case, the clip-path will consider the margin box as its reference to create a basic rectangle using <code>inset(0)<\/code> that will show only what is inside it. In other words, anything outside the margin area is hidden.<\/p>\n\n\n\n<p>Toggle the \u201cdebug mode\u201d in the demo below and you will see a black rectangle that illustrates the clip-path area.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_yyepRJM\" src=\"\/\/codepen.io\/anon\/embed\/yyepRJM?height=650&amp;theme-id=1&amp;slug-hash=yyepRJM&amp;default-tab=result\" height=\"650\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed yyepRJM\" title=\"CodePen Embed yyepRJM\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Only one tail can fit that rectangle, which is perfect for us!<\/p>\n\n\n\n<p class=\"learn-more\">This trick sounds cool! Can\u2019t we apply it to the previous demo as well?<\/p>\n\n\n\n<p>We can! This series of articles could have been one article detailing this trick that I apply to the three examples, but I wanted to explore different ideas and, more importantly, learn about anchor positioning through many examples. Plus, it\u2019s always good to have various methods to achieve the same result.<\/p>\n\n\n\n<p>What about trying to redo the previous example using this technique? Take it as homework to practice what you have learned through this series. You will find my implementation in the next section.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"more-examples\">More Examples<\/h2>\n\n\n\n<p>Let\u2019s start with the previous demos using the new technique. As usual, you have the debug mode to see what\u2019s going on behind the scenes.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_XJXPywg\/44243de511d065ce57460381cb4235b8\" src=\"\/\/codepen.io\/anon\/embed\/XJXPywg\/44243de511d065ce57460381cb4235b8?height=650&amp;theme-id=1&amp;slug-hash=XJXPywg\/44243de511d065ce57460381cb4235b8&amp;default-tab=result\" height=\"650\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed XJXPywg\/44243de511d065ce57460381cb4235b8\" title=\"CodePen Embed XJXPywg\/44243de511d065ce57460381cb4235b8\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_WbrgLvr\/6d8393d0a6d4603243032cff130068af\" src=\"\/\/codepen.io\/anon\/embed\/WbrgLvr\/6d8393d0a6d4603243032cff130068af?height=650&amp;theme-id=1&amp;slug-hash=WbrgLvr\/6d8393d0a6d4603243032cff130068af&amp;default-tab=result\" height=\"650\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed WbrgLvr\/6d8393d0a6d4603243032cff130068af\" title=\"CodePen Embed WbrgLvr\/6d8393d0a6d4603243032cff130068af\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>And another version of the first example, where the tail gets stretched when we get closer to the edges.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ogxeKQY\" src=\"\/\/codepen.io\/anon\/embed\/ogxeKQY?height=450&amp;theme-id=1&amp;slug-hash=ogxeKQY&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ogxeKQY\" title=\"CodePen Embed ogxeKQY\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>I will conclude with one final example for you to study. You can also try to implement it before checking my code if you want another challenge.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_QwyZLzZ\/4e711bdd1f50241b557e2d591236dead\" src=\"\/\/codepen.io\/anon\/embed\/QwyZLzZ\/4e711bdd1f50241b557e2d591236dead?height=650&amp;theme-id=1&amp;slug-hash=QwyZLzZ\/4e711bdd1f50241b557e2d591236dead&amp;default-tab=result\" height=\"650\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed QwyZLzZ\/4e711bdd1f50241b557e2d591236dead\" title=\"CodePen Embed QwyZLzZ\/4e711bdd1f50241b557e2d591236dead\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>And a version with a curved tail:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_KwVGwom\/882f45fc0c39eb180ef37bbe55bee580\" src=\"\/\/codepen.io\/anon\/embed\/KwVGwom\/882f45fc0c39eb180ef37bbe55bee580?height=650&amp;theme-id=1&amp;slug-hash=KwVGwom\/882f45fc0c39eb180ef37bbe55bee580&amp;default-tab=result\" height=\"650\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed KwVGwom\/882f45fc0c39eb180ef37bbe55bee580\" title=\"CodePen Embed KwVGwom\/882f45fc0c39eb180ef37bbe55bee580\" 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>I hope you enjoyed this article series. Our goal was to leverage modern CSS to create common tooltip patterns, while also exploring the powerful Anchor Positioning API. It\u2019s one of those modern features that introduce new mechanisms into the CSS world. We are far from the era where we simply define properties and see a static result. Now we can link different elements across the page, create conditional positioning, define a dynamic behavior that adjusts to each situation, and more!<\/p>\n\n\n\n<p>This feature is only available at its <a href=\"https:\/\/www.w3.org\/TR\/css-anchor-position-1\/\">Level 1<\/a>. The Level 2 will introduce even more ideas, one of which is the ability <a href=\"https:\/\/developer.chrome.com\/blog\/anchored-container-queries?hl=en\">to query the fallback positions<\/a> and apply custom CSS. Here is a demo using this future technique, where I was able to add a border around the tooltip shape!<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_vEKdbyp\" src=\"\/\/codepen.io\/anon\/embed\/vEKdbyp?height=650&amp;theme-id=1&amp;slug-hash=vEKdbyp&amp;default-tab=result\" height=\"650\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed vEKdbyp\" title=\"CodePen Embed vEKdbyp\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>I&#8217;ll let you imagine all the possibilities you can do with this technique.<\/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>With our foundation in positioning and flipping tooltips with anchors, and making pointer tails, we&#8217;re going to get extra tricky and point them diagonally.<\/p>\n","protected":false},"author":12,"featured_media":7725,"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-7714","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\/11\/Perfectly-Pointed-Tooltips_-A-Foundation-3.jpg?fit=1140%2C676&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/7714","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=7714"}],"version-history":[{"count":13,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/7714\/revisions"}],"predecessor-version":[{"id":8735,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/7714\/revisions\/8735"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/7725"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=7714"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=7714"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=7714"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}