🚧 Preact Tippy

Tippy.js component for Preact.

Getting Started

Install the package by running:

npm install --save preact-tippy

Example

import { Component } from 'preact';
import Tippy from 'preact-tippy';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tippy: {
        animation: 'perspective',
        position: 'right'
      }
    }
  }

  render() {
    return (
      <div>
        <Tippy
        title="Hi there. I'm powered by Tippy.js hidden inside Preact."
        className="button"
        name="tester"
        config={this.state.tippy}>
          <button>Hover me.</button>
          <button>Hover me.</button>
          <button>Hover me.</button>
        </Tippy>
      </div>
    );
  }
}

API

Every Tippy configuration option is available through the config prop.
You can check out every option here.

Available Props

• title: The text that will be inside the popup.
• className: A class that every child element inside a Tippy component will get.
• name: A name for your Tippy component. This will wrap the component in an element marked with the ID tippy-<name>.
• config: Configuration object for the popup.

License

• MIT