|
@ -1,4 +1,4 @@ |
|
|
import React from 'react'; |
|
|
import React, { cloneElement } from 'react'; |
|
|
import RcTooltip from 'rc-tooltip'; |
|
|
import RcTooltip from 'rc-tooltip'; |
|
|
import getPlacements from '../popover/placements'; |
|
|
import getPlacements from '../popover/placements'; |
|
|
|
|
|
|
|
@ -9,7 +9,6 @@ const placements = getPlacements({ |
|
|
export default class Tooltip extends React.Component { |
|
|
export default class Tooltip extends React.Component { |
|
|
static defaultProps = { |
|
|
static defaultProps = { |
|
|
prefixCls: 'ant-tooltip', |
|
|
prefixCls: 'ant-tooltip', |
|
|
openClassName: 'ant-popup', |
|
|
|
|
|
placement: 'top', |
|
|
placement: 'top', |
|
|
transitionName: 'zoom-big', |
|
|
transitionName: 'zoom-big', |
|
|
mouseEnterDelay: 0.1, |
|
|
mouseEnterDelay: 0.1, |
|
@ -63,26 +62,29 @@ export default class Tooltip extends React.Component { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
render() { |
|
|
render() { |
|
|
|
|
|
const { prefixCls, title, overlay, children, transitionName } = this.props; |
|
|
// Hide tooltip when there is no title |
|
|
// Hide tooltip when there is no title |
|
|
let visible = this.state.visible; |
|
|
let visible = this.state.visible; |
|
|
if (!this.props.title && !this.props.overlay) { |
|
|
if (!title && !overlay) { |
|
|
visible = false; |
|
|
visible = false; |
|
|
} |
|
|
} |
|
|
if ('visible' in this.props) { |
|
|
if ('visible' in this.props) { |
|
|
visible = this.props.visible; |
|
|
visible = this.props.visible; |
|
|
} |
|
|
} |
|
|
const children = this.props.children; |
|
|
const openClassName = this.props.openClassName || `${prefixCls}-open`; |
|
|
const childrenCls = children.props.className ? `${children.props.className} ${this.props.openClassName}` : this.props.openClassName; |
|
|
const childrenCls = (children && children.props && children.props.className) |
|
|
|
|
|
? `${children.props.className} ${openClassName}` : openClassName; |
|
|
return ( |
|
|
return ( |
|
|
<RcTooltip transitionName={this.props.transitionName} |
|
|
<RcTooltip |
|
|
|
|
|
transitionName={transitionName} |
|
|
builtinPlacements={placements} |
|
|
builtinPlacements={placements} |
|
|
overlay={this.props.title} |
|
|
overlay={title} |
|
|
visible={visible} |
|
|
visible={visible} |
|
|
onVisibleChange={this.onVisibleChange} |
|
|
onVisibleChange={this.onVisibleChange} |
|
|
onPopupAlign={this.onPopupAlign} |
|
|
onPopupAlign={this.onPopupAlign} |
|
|
ref="tooltip" |
|
|
ref="tooltip" |
|
|
{...this.props}> |
|
|
{...this.props}> |
|
|
{visible ? React.cloneElement(children, { className: childrenCls }) : this.props.children} |
|
|
{visible ? cloneElement(children, { className: childrenCls, }) : children} |
|
|
</RcTooltip> |
|
|
</RcTooltip> |
|
|
); |
|
|
); |
|
|
} |
|
|
} |
|
|