solid-tippy
TypeScript icon, indicating that this package has built-in type declarations

0.2.1 • Public • Published

solid-tippy

SolidJS bindings for Tippy.js

NPM JavaScript Style GuideOpen in CodeSandbox

Install

npm i tippy.js solid-tippy
yarn add tippy.js solid-tippy
pnpm add tippy.js solid-tippy

Usage

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

// As directive
<button
  use:tippy={{
    props: {
      content: 'This is a tooltip.',
    },
  }}
>
  Example
</button>

// as hook
const [anchor, setAnchor] = createSignal();

useTippy(anchor, {
  props: {
    content: 'This is a tooltip.',
  },
});

<button ref={anchor}>
  Example
</button>

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.

Headless mode

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

License

MIT © lxsmnsyc

Readme

Keywords

Package Sidebar

Install

npm i solid-tippy

Weekly Downloads

76

Version

0.2.1

License

MIT

Unpacked Size

36.2 kB

Total Files

11

Last publish

Collaborators

  • lxsmnsyc