solid-tippy

solid-tippy

SolidJS bindings for Tippy.js

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