🧠 Tipster

Beautiful, flexible, and easy-to-use tooltips for Svelte. Create reusable tooltip styles, customize colors, borders, and positions — all with a tiny footprint ✨

🚀 Features

• 🎨 Customizable background, color, border, font, and offset
• 🪄 createTipster() to define reusable tooltip presets
• ⚡ Simple use:tooltip directive for quick usage
• 📍 Smart positioning (top, bottom, left, right)
• 🧩 Built with Svelte’s reactivity and clean architecture

📦 Installation

npm install tipsterjs
# or
yarn add tipsterjs
# or
pnpm add tipsterjs

💡 Quick Example

<script>
    import { createTipster, tooltip } from 'tipsterjs';

    const redTooltip = createTipster({
        backgroundColor: 'red',
        color: 'white',
        borderColor: 'darkred',
        borderWidth: '2px',
        fontSize: '14px',
        position: 'top',
        offset: 30
    });
</script>

<h1>Tipster Demo</h1>
<p>
    Visit
    <a
        use:redTooltip={{ offset: 5 }}
        title="Custom reusable tooltip"
        href="https://svelte.dev/docs/kit"
    >
        svelte.dev/docs/kit
    </a>
    to read the documentation
</p>

<p>
    Or try a quick inline tooltip:
    <a
        use:tooltip={{ backgroundColor: 'blue', color: 'white', position: 'bottom' }}
        title="Dynamic tooltip powered by Tipster"
    >
        hover me
    </a>
</p>

⚙️ API

use:tooltip

Attach a tooltip directly to any element.

Props:

createTipster(defaults)

Create a reusable tooltip directive with shared defaults.

const myTooltip = createTipster({
    backgroundColor: '#222',
    color: '#fff',
    position: 'top'
});

Then use it anywhere:

<a use:myTooltip={{ offset: 10 }} title="Hello!">Hover me</a>

🧠 How It Works

Tipster:

1. Reads the element’s title attribute
2. Creates a Svelte tooltip component dynamically
3. Tracks mouse movement & viewport resizing
4. Cleans up everything on unmount

Lightweight, no dependencies, and works seamlessly in any Svelte project 💪

🤝 Contributing

Got an idea? Found a bug? PRs and issues are always welcome 💙

git clone https://github.com/mostafa-kheibary/Tipster
cd Tipster
pnpm install
pnpm dev

📜 License

MIT — do whatever you want, just don’t remove the credit 🙃