Practical Actions: clickOutside tooltip autofocus
Build real-world reusable actions for common UI patterns.
Practical Actions: clickOutside tooltip autofocus is a free Sveltejs Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Sveltejs Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
clickOutside Action
Detect clicks outside an element to close menus and dropdowns.
function clickOutside(node, cb) {
function handler(e) { if (!node.contains(e.target)) cb(); }
document.addEventListener("click", handler, true);
return { destroy() { document.removeEventListener("click", handler, true); } };
}Use clickOutside
Pass a callback that runs when the user clicks outside.
<div use:clickOutside={() => open = false}>autofocus Action
Focus an element on mount; cleaner than a bind:this + onMount.
function autofocus(node) { node.focus(); }Use autofocus
Apply to inputs or any focusable element.
<input use:autofocus />tooltip Action
Show a tooltip when hovering. Encapsulate listeners and DOM creation in one action.
lazyLoad Action
Combine IntersectionObserver with use: to lazy-load images.
clickConfirm Action
Require two clicks within a window to confirm destructive operations.
Reuse Across Components
Once written, an action works on any compatible element. Store them in $lib/actions.
Action Libraries
Packages like svelte-use ship dozens of pre-built actions.
Compose Actions
Apply multiple actions on one element: use:autofocus use:clickOutside={close}.
Best Practice
Keep actions focused on one behavior. Compose for richer effects.
Quick Check
What does a clickOutside action need?
Recap
Practical actions like clickOutside, autofocus, and tooltip showcase how to encapsulate reusable DOM behaviors.
Frequently asked questions
Is the “Practical Actions: clickOutside tooltip autofocus” lesson free?
Yes — the full text of “Practical Actions: clickOutside tooltip autofocus” is free to read here on the web, and the Sveltejs Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Sveltejs Academy course, upgrade to CoddyKit PRO.
What will I learn in “Practical Actions: clickOutside tooltip autofocus”?
Build real-world reusable actions for common UI patterns. You practise Sveltejs Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Sveltejs Academy?
No prior experience is required. Sveltejs Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Practical Actions: clickOutside tooltip autofocus” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Sveltejs Academy lesson?
Yes. Every Sveltejs Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- use: Directive Syntax
- Action Parameters and Updates
- The destroy() Cleanup Function
- Practical Actions: clickOutside tooltip autofocus