https://github.com/mdauner/sveltejs-tippy

Tippy.js for Svelte
https://github.com/mdauner/sveltejs-tippy

popover svelte svelte3 sveltejs tippyjs tooltip

Last synced: 8 months ago
JSON representation

Tippy.js for Svelte

• Host: GitHub
• URL: https://github.com/mdauner/sveltejs-tippy
• Owner: mdauner
• License: mit
• Created: 2019-10-12T22:29:08.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-10T06:22:01.000Z (almost 3 years ago)
• Last Synced: 2024-10-05T07:53:29.287Z (about 1 year ago)
• Topics: popover, svelte, svelte3, sveltejs, tippyjs, tooltip
• Language: JavaScript
• Size: 1.52 MB
• Stars: 40
• Watchers: 1
• Forks: 4
• Open Issues: 37
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# sveltejs-tippy

![npm](https://img.shields.io/npm/v/sveltejs-tippy)

![npm bundle size](https://img.shields.io/bundlephobia/minzip/sveltejs-tippy)

![npm](https://img.shields.io/npm/dw/sveltejs-tippy)

![GitHub](https://img.shields.io/github/license/mdauner/sveltejs-tippy)

![Actions Status](https://github.com/mdauner/sveltejs-tippy/workflows/CI/badge.svg)

Tippy.js for [Svelte](https://svelte.dev/).

## Install

```shell

$ npm i sveltejs-tippy

```

or

```shell

$ yarn add sveltejs-tippy

```

## How to use

### Example

[![Edit sveltejs-tippy](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/sveltejs-tippy-h2ns7?fontsize=14&module=%2FApp.svelte)

```html

  import tippy from "sveltejs-tippy";

  const props = {

    content: "<span class='tooltip'>Styled tooltip text</span>",

    placement: "bottom"

  };

  :global(.tooltip) {

    font-size: 1.2rem;

    text-transform: uppercase;

  }

  Hover me

```