1.0.0 • Published 4 years ago
@feizheng/react-tip v1.0.0
react-tip
Tooltip for react based on ballon.css.
installation
npm install -S @feizheng/react-tip
update
npm update @feizheng/react-tip
properties
property | type | default | description |
---|---|---|---|
className | String | - | - |
title | String | - | - |
placement | String | - | - |
placement
[
"up",
"down",
"left",
"right",
"up-left",
"up-right",
"down-left",
"down-right"
]
usage
import css
@import "balloon-css"; @import "~@feizheng/react-tip/dist/style.scss"; // customize your styles: $react-tip-options: ()
import js
import ReactTip from '../src/main'; import ReactDOM from 'react-dom'; import React from 'react'; import './assets/style.scss'; class App extends React.Component { state = { placements: [ 'up', 'down', 'left', 'right', 'up-left', 'up-right', 'down-left', 'down-right' ] }; render() { const { placements } = this.state; return ( <div className="app-container"> {placements.map((item) => { return ( <ReactTip key={item} title={`abc.com - ${item}`} placement={item}> <button>Abc.com - {item}</button> </ReactTip> ); })} </div> ); } } ReactDOM.render(<App />, document.getElementById('app'));
documentation
resources
1.0.0
4 years ago