Sveltip

Simple tooltip component for Svelte, comes with light and dark theme.

Get started

Installation

npm install sveltip

Usage

First you need to import it on the script section

// ...
    import Sveltip from 'sveltip';
// ...

and then use it on your application. Here's some example code:

    <Sveltip top dark text="Click me to begin">
        <button>Start</button>
    </Sveltip>

    <Sveltip bottom light text="Click me to begin">
        <button>Start</button>
    </Sveltip>

    <Sveltip right dark text="Dolor Sit Amet">
        <h1>Lorem Ipsum</h1>
    </Sveltip>

Properties

These are all available props, please refer the sample above on how they work

text 
// Text displayed on the tooltip

light
// Light mode for the tooltip bubble

dark
// Dark mode for the tooltip bubble

top
// Put the tooltip on the top of element

bottom
// Put the tooltip on the bottom of element

left
// Put the tooltip on the left side of element

right
// Put the tooltip on the left side of element