preact-tippy

1.0.1 • Public • Published

🚧 Preact Tippy

Open Source Love Open Source Love PRs Welcome

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

Package Sidebar

Install

npm i preact-tippy

Weekly Downloads

0

Version

1.0.1

License

MIT

Unpacked Size

6.43 kB

Total Files

5

Last publish

Collaborators

  • molnarmark