https://github.com/lxsmnsyc/solid-tippy

SolidJS bindings for Tippy.js
https://github.com/lxsmnsyc/solid-tippy

Last synced: about 2 months ago
JSON representation

SolidJS bindings for Tippy.js

• Host: GitHub
• URL: https://github.com/lxsmnsyc/solid-tippy
• Owner: lxsmnsyc
• License: mit
• Created: 2021-11-14T08:18:44.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2023-02-09T13:53:58.000Z (almost 2 years ago)
• Last Synced: 2024-05-02T05:19:36.106Z (8 months ago)
• Language: TypeScript
• Size: 421 KB
• Stars: 33
• Watchers: 3
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-solid-js - Solid Tippy - tippy)) (📦 Components & Libraries / UI Components)

README

        
# solid-tippy

> SolidJS bindings for [Tippy.js](https://atomiks.github.io/tippyjs/)

[![NPM](https://img.shields.io/npm/v/solid-tippy.svg)](https://www.npmjs.com/package/solid-tippy) [![JavaScript Style Guide](https://badgen.net/badge/code%20style/airbnb/ff5a5f?icon=airbnb)](https://github.com/airbnb/javascript)[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square&logo=codesandbox)](https://codesandbox.io/s/github/LXSMNSYC/solid-tippy/tree/main/examples/solid-tippy-demo)

## Install

```bash

npm i tippy.js solid-tippy

```

```bash

yarn add tippy.js solid-tippy

```

```bash

pnpm add tippy.js solid-tippy

```

## Usage

```jsx

import { tippy, useTippy } from 'solid-tippy';

// As directive

  Example

// as hook

const [anchor, setAnchor] = createSignal();

useTippy(anchor, {

  props: {

    content: 'This is a tooltip.',

  },

});

  Example

```

### Options

- `disabled`: Disables the Tippy instance. Defaults to `false`.

- `hidden`: Hides the Tippy instance. Defaults to `false`.

- `props`: Props to be passed to the Tippy instance when creating or updating it. You can read more about it [here](https://atomiks.github.io/tippyjs/v6/all-props/).

### Headless mode

You may use `tippyHeadless` or `useTippyHeadless` instead of `tippy` and `useTippy` for Headless Tippy instances.

## License

MIT © [lxsmnsyc](https://github.com/lxsmnsyc)