Building a Svelte Tooltip Extension for Browser Enhancements

[Lomanu4]

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:

?

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

If this was helpful, you can also support me here:

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.