You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

59 lines
1.3 KiB

import React from 'react';
import Tooltip from 'rc-tooltip';
import getPlacements from './placements';
const placements = getPlacements();
const prefixCls = 'ant-popover';
export default class Popover extends React.Component {
render() {
const transitionName = ({
top: 'zoom-down',
bottom: 'zoom-up',
left: 'zoom-right',
right: 'zoom-left',
topLeft: 'zoom-down',
bottomLeft: 'zoom-up',
leftTop: 'zoom-right',
rightTop: 'zoom-left',
topRight: 'zoom-down',
bottomRight: 'zoom-up',
leftBottom: 'zoom-right',
rightBottom: 'zoom-left',
})[this.props.placement];
return (
<Tooltip transitionName={transitionName}
builtinPlacements={placements}
ref="tooltip"
{...this.props}
overlay={this.getOverlay()}>
{this.props.children}
</Tooltip>
);
}
getPopupDomNode() {
return this.refs.tooltip.getPopupDomNode();
}
getOverlay() {
return (
<div>
{this.props.title && <div className={`${prefixCls}-title`}>{this.props.title}</div>}
<div className={`${prefixCls}-inner-content`}>
{this.props.overlay}
</div>
</div>
);
}
}
Popover.defaultProps = {
prefixCls,
placement: 'top',
trigger: 'hover',
mouseEnterDelay: 0.1,
mouseLeaveDelay: 0.1,
overlayStyle: {}
};