| 40 | } |
| 41 | |
| 42 | render () { |
| 43 | let props = this.props; |
| 44 | let event = {}; |
| 45 | let pos = this.state.position; |
| 46 | let clsShow = 'pos-'+ pos; |
| 47 | let clsName = classnames('tip-block', pos +'-origin' ,{[clsShow]: this.state.show}); |
| 48 | |
| 49 | event[ props.trigger == 'hover' ? 'onMouseEnter':'onClick'] = this.showTip; |
| 50 | props.trigger == 'hover' && (event['onMouseLeave'] = this.hideTip); |
| 51 | |
| 52 | return ( |
| 53 | <div ref={(el)=>this.root = el} className="component-tip" {...event}> |
| 54 | { props.children[0]} |
| 55 | <div ref="content" className={clsName}> |
| 56 | <div className="tip-border"> |
| 57 | <span className="arrow"></span> |
| 58 | {props.children[1]} |
| 59 | </div> |
| 60 | </div> |
| 61 | </div> |
| 62 | ); |
| 63 | } |
| 64 | }; |
| 65 | |
| 66 | Tip.defaultProps = { |