--- title: Minimal JS, modern CSS anchored product tours | daily.dev description: A tutorial demonstrates building an interactive product tour with spotlight highlighting and a positioned dialog card using roughly 100 lines of code. The... canonical: https://daily.dev/posts/minimal-js-modern-css-anchored-product-tours-kz0l4leyh twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Minimal JS, modern CSS anchored product tours | daily.dev og:description: A tutorial demonstrates building an interactive product tour with spotlight highlighting and a positioned dialog card using roughly 100 lines of code. The... og:url: https://daily.dev/posts/minimal-js-modern-css-anchored-product-tours-kz0l4leyh og:image: https://api.daily.dev/og/posts/kz0L4Leyh.png og:image:alt: Minimal JS, modern CSS anchored product tours og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Minimal JS, modern CSS anchored product tours **[RUBYLAND](https://daily.dev/sources/rubyla)** · 4 min read · 21 upvotes · 1 comments ## Summary A tutorial demonstrates building an interactive product tour with spotlight highlighting and a positioned dialog card using roughly 100 lines of code. The technique combines a clip-path polygon overlay that cuts a spotlight hole around a target element with CSS Anchor Positioning to attach a dialog card to that element without JS position calculations. Anchor Positioning ships in most browsers as of mid-2026, and position-try-fallbacks lets the browser handle overflow by trying flip alternatives automatically, degrading gracefully when unsupported. Full source code is available on GitHub, and a Stimulus controller wires the JS pieces together. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How can I position a tooltip or dialog next to a target element using CSS anchor positioning instead of JavaScript? Set anchor-name on the target element via JavaScript, then in CSS declare position-anchor on the dialog referencing that name and use anchor() functions like left: anchor(--target right) to place it. Add position-try-fallbacks: flip-inline, flip-block, flip-start so the browser automatically tries alternate placements when the preferred one doesn't fit the viewport, eliminating manual overflow detection code. _Developers wiring up anchor-based UI positioning can track browser support shifts like this on daily.dev._ ### How do I create a spotlight overlay effect that cuts a hole around a specific element on the page? Use clip-path: polygon() on a full-viewport overlay, tracing the outer boundary and then cutting inward around the target element's bounding rectangle (from getBoundingClientRect) with a small gap, such as 8px. Pair it with a requestAnimationFrame loop to keep the cutout aligned with the target during scroll or resize. _Anyone building spotlight or masking UI can revisit clip-path techniques like this through daily.dev._ ### What happens to a UI element using CSS anchor() functions in browsers that don't support anchor positioning? The anchor() values fall back to auto, so the element renders without being anchored to its target's position, but nothing breaks outright. In a product tour context, the spotlight overlay and tour logic keep working normally; only the dialog loses its automatic positioning relative to the highlighted element, which is considered an acceptable degradation for a progressive enhancement. _Developers weighing progressive enhancement trade-offs for newer CSS features can follow browser support changes on daily.dev._ ## Community discussion Top comments from developers on daily.dev. **@agustinbarrientos** · 0 upvotes > An unanchored tour card isn't worth showing if the spotlight still moves, so I'd keep it in normal flow when anchor positioning isn't available ## Similar posts on daily.dev - [Perfectly Pointed Tooltips: A Foundation – Frontend Masters Blog](https://daily.dev/posts/perfectly-pointed-tooltips-a-foundation-frontend-masters-blog-yodltprsv) · Frontend Masters · 6 upvotes · 0 comments - [Dynamic Tooltip Position with Anchor Positioning III](https://daily.dev/posts/dynamic-tooltip-position-with-anchor-positioning-iii-xirgfdmxy) · CSS Tip · 1 upvotes · 0 comments - [CSS does your tooltip positioning now](https://daily.dev/posts/css-does-your-tooltip-positioning-now-4wx8q4s5u) · Matt Smith · 5 upvotes · 1 comments --- Tags: [#css](https://daily.dev/tags/css) [View this post on daily.dev](https://daily.dev/posts/minimal-js-modern-css-anchored-product-tours-kz0l4leyh) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Minimal JS, modern CSS anchored product tours","url":"https://daily.dev/posts/minimal-js-modern-css-anchored-product-tours-kz0l4leyh","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/minimal-js-modern-css-anchored-product-tours-kz0l4leyh"},"datePublished":"2026-08-20T07:57:32.114Z","dateModified":"2026-09-14T07:55:24.927Z","description":"A tutorial demonstrates building an interactive product tour with spotlight highlighting and a positioned dialog card using roughly 100 lines of code. The...","image":"https://railsdesigner.com/images/posts/onboarding-preview.gif","thumbnailUrl":"https://railsdesigner.com/images/posts/onboarding-preview.gif","isAccessibleForFree":true,"articleSection":"RUBYLAND","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"RUBYLAND","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/rubyla","url":"https://daily.dev/sources/rubyla"},"commentCount":1,"discussionUrl":"https://daily.dev/posts/minimal-js-modern-css-anchored-product-tours-kz0l4leyh","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":21},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":1}],"keywords":"css","timeRequired":"PT4M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"RUBYLAND","item":"https://daily.dev/sources/rubyla"},{"@type":"ListItem","position":3,"name":"Minimal JS, modern CSS anchored product tours"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/minimal-js-modern-css-anchored-product-tours-kz0l4leyh","comment":[{"@type":"Comment","text":"An unanchored tour card isn’t worth showing if the spotlight still moves, so I’d keep it in normal flow when anchor positioning isn’t available","datePublished":"2026-08-26T21:31:59.219Z","url":"https://daily.dev/posts/kz0L4Leyh#c-lU81spKxb","author":{"@type":"Person","name":"Agustin Barrientos","url":"https://daily.dev/agustinbarrientos","image":"https://media.daily.dev/image/upload/s--5ayxQnqn--/f_auto/v1788281802/avatars/avatar_wQYYVe5Tbj0NJ7C7qPoa8?_a=BAMAMicg0"}}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/minimal-js-modern-css-anchored-product-tours-kz0l4leyh#faq","mainEntity":[{"@type":"Question","name":"How can I position a tooltip or dialog next to a target element using CSS anchor positioning instead of JavaScript?","acceptedAnswer":{"@type":"Answer","text":"Set anchor-name on the target element via JavaScript, then in CSS declare position-anchor on the dialog referencing that name and use anchor() functions like left: anchor(--target right) to place it. Add position-try-fallbacks: flip-inline, flip-block, flip-start so the browser automatically tries alternate placements when the preferred one doesn't fit the viewport, eliminating manual overflow detection code. Developers wiring up anchor-based UI positioning can track browser support shifts like this on daily.dev."}},{"@type":"Question","name":"How do I create a spotlight overlay effect that cuts a hole around a specific element on the page?","acceptedAnswer":{"@type":"Answer","text":"Use clip-path: polygon() on a full-viewport overlay, tracing the outer boundary and then cutting inward around the target element's bounding rectangle (from getBoundingClientRect) with a small gap, such as 8px. Pair it with a requestAnimationFrame loop to keep the cutout aligned with the target during scroll or resize. Anyone building spotlight or masking UI can revisit clip-path techniques like this through daily.dev."}},{"@type":"Question","name":"What happens to a UI element using CSS anchor() functions in browsers that don't support anchor positioning?","acceptedAnswer":{"@type":"Answer","text":"The anchor() values fall back to auto, so the element renders without being anchored to its target's position, but nothing breaks outright. In a product tour context, the spotlight overlay and tour logic keep working normally; only the dialog loses its automatic positioning relative to the highlighted element, which is considered an acceptable degradation for a progressive enhancement. Developers weighing progressive enhancement trade-offs for newer CSS features can follow browser support changes on daily.dev."}}]} ```