https://github.com/molnarmark/preact-tippy

🚧 Tippy.js component for Preact.
https://github.com/molnarmark/preact-tippy

Last synced: 4 months ago
JSON representation

🚧 Tippy.js component for Preact.

• Host: GitHub
• URL: https://github.com/molnarmark/preact-tippy
• Owner: molnarmark
• License: mit
• Created: 2018-08-22T21:21:14.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-08-22T23:26:03.000Z (almost 7 years ago)
• Last Synced: 2025-03-06T04:56:36.220Z (4 months ago)
• Language: JavaScript
• Size: 3.91 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 🚧 Preact Tippy

[![Open Source Love](https://badges.frapsoft.com/os/v1/open-source.svg?v=102)](https://github.com/ellerbrock/open-source-badge/)

[![Open Source Love](https://badges.frapsoft.com/os/mit/mit.svg?v=102)](https://github.com/ellerbrock/open-source-badge/)

[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)

> Tippy.js component for Preact.

### Getting Started

Install the package by running:

```

npm install --save preact-tippy

```

### Example

```javascript

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 (

      


        

          Hover me.

          Hover me.

          Hover me.

        

      

    );

  }

}

```


### API

Every [Tippy](https://atomiks.github.io/tippyjs/v1/index.html) configuration option is available through the `config` prop.\

You can check out every option [here](https://atomiks.github.io/tippyjs/v1/index.html#all-settings).

#### 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-`.

  - config: Configuration object for the popup.

### License

- MIT