Common action patterns (click-outside, tooltip) in Svelte - Mini Project: Build & Apply

Common action patterns (click-outside, tooltip) in Svelte

📖 Scenario: You are building a simple interactive web component in Svelte. It will show a button that, when clicked, displays a tooltip. The tooltip should disappear when the user clicks anywhere outside the button or tooltip area.

🎯 Goal: Create a Svelte component that uses common action patterns: a clickOutside action to detect clicks outside an element and a tooltip that appears on button click and hides on outside click.

📋 What You'll Learn

Create a Svelte component with a button and a tooltip element

Use a clickOutside action to detect clicks outside the tooltip

Show the tooltip when the button is clicked

Hide the tooltip when clicking outside the tooltip or button

Use Svelte's reactive and action features properly

💡 Why This Matters

🌍 Real World

Click-outside detection and tooltips are common in web apps for menus, popups, and help messages. This pattern improves user experience by closing overlays when clicking elsewhere.

💼 Career

Understanding how to create reusable actions and manage component state in Svelte is valuable for frontend developer roles working with modern frameworks.

1

Set up the initial Svelte component with a button and tooltip container

Create a Svelte component with a <button> element that has the text Show Tooltip and a <div> with class tooltip that contains the text This is a tooltip. Do not add any interactivity yet.

Svelte

Show Tooltip
This is a tooltip

Hint

Use a <button> tag with the exact text Show Tooltip and a <div> with class tooltip containing the text This is a tooltip.

2

Add a reactive variable to control tooltip visibility

Add a let variable called showTooltip and set it to false. This will control whether the tooltip is visible or hidden.

Svelte

let showTooltip = false


Show Tooltip
This is a tooltip

Hint

Declare let showTooltip = false inside a <script> tag at the top of your Svelte component.

3

Add button click to toggle tooltip visibility and conditionally show tooltip

Add an on:click event to the <button> that sets showTooltip = true. Then, update the <div class="tooltip"> to only render when showTooltip is true using Svelte's {#if} block.

Svelte

let showTooltip = false


 showTooltip = true}>Show Tooltip

{#if showTooltip}
  This is a tooltip
{/if}

Hint

Use on:click={() => showTooltip = true} on the button and wrap the tooltip div inside {#if showTooltip} ... {/if}.

4

Create and use a clickOutside action to hide tooltip on outside clicks

Create a Svelte action called clickOutside that listens for clicks outside the element it is applied to and sets showTooltip = false. Apply this action to the tooltip <div> so that clicking outside hides the tooltip. Also, ensure that clicking the button does not immediately close the tooltip by stopping event propagation.

Svelte

function clickOutside(node) {
  const handleClick = event => {
    if (!node.contains(event.target)) {
      showTooltip = false
    }
  }
  document.addEventListener('click', handleClick, true)
  return {
    destroy() {
      document.removeEventListener('click', handleClick, true)
    }
  }
}

let showTooltip = false


 { e.stopPropagation(); showTooltip = true; }}>Show Tooltip

{#if showTooltip}
  This is a tooltip
{/if}

Hint

Define the clickOutside action function that adds and removes a click event listener on the document. Use use:clickOutside on the tooltip div. Also, stop event propagation on the button click to prevent immediate closing.