Svelte Tooltip

Table of contents

• Getting Started
  • Installation
  • Usage
• Properties
  • active
  • color
  • tip
  • directional props
    • top
    • right
    • bottom
    • left
• Useful tips
  • changing text color

Getting Started

Installation

To install Svelte Tooltip into your svelte project use your package manager npm/yarn run one of the following commands on your terminal.

npm install -D svelte-tooltip or yarn add -D svelte-tooltip

Usage

Svelte Tooltip is really simple to use, first you need to import it on a script section

<script>
    import SvelteTooltip from 'svelte-tooltip';
</script>

and then use it on your component html template, passing as slot whatever you want to trigger the tooltip when hovered, usually these is going to be a button, icon, image, or a link.

<SvelteTooltip tip="view on github" bottom >
    <button>Click me</button>
</SvelteTooltip>

**Important: ** make sure to allways use one and just one directional prop, top, right, bottom, or left , those will position the tooltip according to the slot will passed, and not setting any or setting multiple will cause undefined behavior.

Properties

active

The active allows you to programmatically display a tooltip rather than waiting to a user hover, it's expected type is boolean and it defaults to false.

<SvelteTooltip tip="this is visible" left active>

color

The default Svelte Tooltip background-color is #757575, however you can easily change that with the color property, it's type is String and any css valid color is also valid for this property.

<SvelteTooltip tip="change the color" top color="#FFB74D">

tip

tip property is the actual text displayed inside the tooltip.

<SvelteTooltip tip="view on github" bottom >

Directional Props

The directional props allows you to position your tooltip in relation to the slot you give to the tooltip. As mentioned above SvelteTooltip should take exactly one directional prop.

top

<SvelteTooltip tip="I'm on the top" top >

right

<SvelteTooltip tip="I'm on the right" right >

bottom

<SvelteTooltip tip="I'm on the bottom" bottom >

left

<SvelteTooltip tip="I'm on the left" left >

Useful tips

Changing text color

Svelte tooltip has no default way of changing it's text color, however since the tooltip component inherits the text color from its parent. The recomended way to set the text color is by wrapping the tooltip inside a div and use the css color attribute on it.

<style>
.wrapper {
  color: #fafafa;
}
</style>

<div class="wrapper">
    <SvelteTooltip tip="white text" bottom  color="#EF6C00">
        <button>Click me</button>
    </SvelteTooltip>
</div>