Building a Svelte Tooltip Extension for Browser Enhancements

Adding tooltips is a common feature to enhance user experience in web apps and extensions. Using Svelte, you can build lightning-fast, reactive tooltips that integrate smoothly with your browser extension’s UI. This guide walks you through creating a simple tooltip component and wiring it into your extension’s content script.

Step 1 - Setup Your Extension Folder

Create this folder structure:

my-tooltip-extension/
├── public/
│   └── icon.png
├── src/
│   ├── Tooltip.svelte
│   └── content.js
├── manifest.json
├── content.html
├── rollup.config.js
└── package.json

Step 2 - Define the Manifest

manifest.json minimal setup for content scripts and permissions:

{
  "manifest_version": 3,
  "name": "Svelte Tooltip Extension",
  "version": "1.0",
  "permissions": ["activeTab"],
  "content_scripts": [
    {
      "matches": [""],
      "js": ["build/content.js"]
    }
  ],
  "action": {
    "default_icon": "public/icon.png"
  }
}

Step 3 - Create the Tooltip Component

Inside src/Tooltip.svelte:

  export let text = "";
  export let x = 0;
  export let y = 0;



  {text}



  .tooltip {
    position: absolute;
    background: black;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    pointer-events: none;
    transform: translate(-50%, -100%);
    white-space: nowrap;
    z-index: 1000;
  }

Step 4 - Inject Tooltip from Content Script

In src/content.js:

import Tooltip from './Tooltip.svelte';

let tooltip;

document.addEventListener('mouseover', (e) => {
  const target = e.target.closest('[data-tooltip]');
  if (target) {
    if (!tooltip) {
      tooltip = new Tooltip({
        target: document.body,
        props: { text: target.dataset.tooltip, x: e.pageX, y: e.pageY }
      });
    } else {
      tooltip.$set({ text: target.dataset.tooltip, x: e.pageX, y: e.pageY });
    }
  }
});

document.addEventListener('mousemove', (e) => {
  if (tooltip) {
    tooltip.$set({ x: e.pageX, y: e.pageY });
  }
});

document.addEventListener('mouseout', (e) => {
  if (tooltip && !e.target.closest('[data-tooltip]')) {
    tooltip.$destroy();
    tooltip = null;
  }
});

Step 5 - Setup Rollup Config

Minimal rollup.config.js for bundling content script:

import svelte from 'rollup-plugin-svelte';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';

export default {
  input: 'src/content.js',
  output: {
    file: 'build/content.js',
    format: 'iife',
    name: 'content'
  },
  plugins: [
    svelte(),
    resolve({ browser: true }),
    commonjs()
  ]
};

Step 6 - Load Your Extension

1. Run bundler: rollup -c --watch
2. Go to chrome://extensions
3. Enable Developer Mode
4. Click "Load unpacked" and select my-tooltip-extension

Use Case Scenario

You’re creating a browser extension to enhance documentation pages by adding inline tooltips on technical terms. Using this Svelte tooltip component injected dynamically, you offer users contextual info that loads quickly without bulky frameworks, improving their reading experience.

✅ Pros and ❌ Cons

✅ Pros:

• Small, fast reactive tooltips with minimal overhead
• Easy to customize styles and behavior
• Works seamlessly as content script injected UI

❌ Cons:

• Requires bundler setup for Svelte
• Tooltip positioning may need adjustments for scroll or viewport
• Manifest v3 restrictions can be tricky for some injection cases

Summary

Svelte is ideal for building clean, reactive UI components for browser extensions like tooltips. By combining its small runtime with content script injection, you get a high-performance, maintainable way to add useful features without bloat.

Grab my 19-page PDF guide Svelte Extensions: Build Lightning-Fast Browser Add‑ons Without the Bloat for just $5 to master these patterns and more:

👉 Buy it here

If this was helpful, you can also support me here: Buy Me a Coffee ☕