Common action patterns (click-outside, tooltip) in Svelte - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the click-outside action pattern in Svelte?

It detects when a user clicks outside a specific element, allowing you to close menus, dialogs, or tooltips when clicking elsewhere on the page.

beginner

How does a tooltip action typically improve user experience?

It shows helpful information when users hover or focus on an element, giving context without cluttering the interface.

intermediate

In Svelte, what lifecycle method is commonly used inside an action to set up event listeners?

The action function itself runs when the element is created, and it can return a cleanup function to remove listeners when the element is destroyed.

intermediate

Why is it important to remove event listeners in a click-outside action when the element is destroyed?

To prevent memory leaks and unexpected behavior by cleaning up resources no longer needed.

advanced

What role does event.stopPropagation() play in implementing a click-outside action?

It prevents clicks inside the target element from bubbling up and triggering the outside click handler, avoiding false positives.

What does a click-outside action detect in Svelte?

A Hovering over an element

B Clicks inside a button only

C Clicks outside a specific element

D Scrolling the page

The click-outside action listens for clicks outside the target element to trigger behaviors like closing menus.

Which event is commonly used to show a tooltip in Svelte?

A click

B hover or focus

C scroll

D keydown

Tooltips usually appear on hover or keyboard focus to provide extra info.

What should an action return in Svelte to clean up event listeners?

A A function that removes listeners

B A boolean value

C Nothing

D A promise

Returning a cleanup function ensures listeners are removed when the element is destroyed.

Why use event.stopPropagation() inside a click-outside action?

A To disable all clicks

B To stop the page from scrolling

C To trigger the outside click handler

D To allow clicks inside the element without triggering outside click

Stopping propagation prevents clicks inside the element from being mistaken as outside clicks.

What is a key benefit of using actions for patterns like click-outside and tooltip in Svelte?

A They keep code reusable and clean

B They slow down the app

C They require no JavaScript

D They only work on buttons

Actions let you add behavior to elements cleanly and reuse it across your app.

Explain how you would implement a click-outside action in Svelte. What steps and event handling would you use?

Think about listening globally and ignoring clicks inside the element.

Describe how a tooltip action works in Svelte and how it improves accessibility.

Consider both mouse and keyboard users.