智慧物流>> react-float-tooltip>> 返回
项目作者： gornyyvladimir

项目描述 ：
react tooltip component https://gornyyvladimir.github.io/react-float-tooltip/
高级语言： JavaScript
项目地址: git://github.com/gornyyvladimir/react-float-tooltip.git
创建时间： 2019-05-13T09:33:08Z
项目社区：https://github.com/gornyyvladimir/react-float-tooltip
开源协议：
下载


react-float-tooltip

NPM JavaScript Style Guide
semantic-release
Coverage Status
Build Status

Preview

This React Component lets you create full-controlled float tooltips like that. And it’s easy to use 👍. Also check out demo page 😉

react-float-tooltip gif

Getting started

Install with npm or yarn

  1. npm install --save react-float-tooltip

or

  1. yarn add react-float-tooltip

This uses portals so you need to add id="tooltip-root" to your index.html next to id="root"

  1. <div id="root"></div>
  2. <!-- tooltip container -->
  3. <div id="tooltip-root"></div>

react-float-tooltip adds a Tooltip wrapper that takes tooltip component as a tooltipElement prop.

  1. import React, { Component } from 'react'
  2. import Tooltip from 'react-float-tooltip'
  4. class App extends Component {
  5.   render() {
  6.     return (
  7.       <div>
  8.         <Tooltip tooltipElement={() => <div style={{background: 'yellow'}}>Tooltip</div>}>
  9.           <div>Element with tooltip</div>
  10.         </Tooltip>
  11.       </div>
  12.     );
  13.   }
  14. }
  16. export default App;

Check example folder for more.

Api

Props

name type default isRequired description
disable boolean false false disable tooltip
isRevert boolean false false revert tooltip if it has no place from the right edge
offset number 0 false tooltip offset from right edge
tooltipElement function true function that returns component for render tooltip
children React.Element true wrapped element
className string false className for children wrapper component
style Object false style for children wrapper component

Development

First, run rollup to watch your src/ module and automatically recompile it into dist/ whenever you make changes.

  1. npm start # runs rollup with watch flag

The second part will be running the example/ create-react-app that’s linked to the local version of your module.

  1. cd example
  2. npm start # runs create-react-app dev server

Now, anytime you make a change to your library in src/ or to the example app’s example/src, create-react-app will live-reload your local dev server so you can iterate on your component in real-time.

Check create-react-library documentation for development.

License

MIT © gornyyvladimir