tooltip

Tooltip for react based on ballon.css

Feb 27, 2021
Tooltip for react based on ballon.css

react-tip

Tooltip for react based on ballon.css.

View Demo View Github

installation

npm install -S @jswork/react-tip

properties

NameTypeRequiredDefaultDescription
classNamestringfalse-The extended className for component.
titlestringfalse-The tooltip title.
placementenumfalse'up'The placement.

usage

  1. import css
// or use sass @import "balloon-css"; @import "[email protected]/react-tip/dist/style.scss"; // customize your styles: $react-tip-options: ()
  1. import js
import ReactDemokit from '@jswork/react-demokit'; import React from 'react'; import ReactDOM from 'react-dom'; import ReactTip from '@jswork/react-tip'; 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 ( <ReactDemokit className="p-3 app-container" url="https://github.com/afeiship/react-tip"> {placements.map((item) => { return ( <ReactTip key={item} title={`abc.com - ${item}`} placement={item}> <button className="button is-fullwidth is-info">Abc.com - {item}</button> </ReactTip> ); })} </ReactDemokit> ); } } ReactDOM.render(<App />, document.getElementById('app'));

GitHub

Recommended