ant-design/components/tooltip/index.jsx

60 lines
1.3 KiB
React
Raw Normal View History

import React from 'react';
import Tooltip from 'rc-tooltip';
import getPlacements from '../popover/placements';
const placements = getPlacements({
verticalArrowShift: 8,
});
2015-06-03 17:08:43 +08:00
export default React.createClass({
2015-06-17 17:15:34 +08:00
getDefaultProps() {
2015-06-03 17:08:43 +08:00
return {
prefixCls: 'ant-tooltip',
placement: 'top',
mouseEnterDelay: 0.1,
mouseLeaveDelay: 0.1
2015-06-03 17:08:43 +08:00
};
},
getInitialState() {
return {
visible: false
};
},
onVisibleChange(visible) {
this.setState({ visible });
},
2015-06-17 17:15:34 +08:00
render() {
2015-09-01 16:18:46 +08:00
let transitionName = ({
2015-06-17 17:15:34 +08:00
top: 'zoom-down',
bottom: 'zoom-up',
left: 'zoom-right',
2015-11-03 13:50:36 +08:00
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',
2015-06-17 17:15:34 +08:00
})[this.props.placement];
// Hide tooltip when there is no title
let visible = this.state.visible;
if (!this.props.title) {
visible = false;
}
2015-06-10 17:59:32 +08:00
return (
<Tooltip transitionName={transitionName}
builtinPlacements={placements}
overlay={this.props.title}
visible={visible}
onVisibleChange={this.onVisibleChange}
{...this.props}>
2015-06-03 17:08:43 +08:00
{this.props.children}
</Tooltip>
2015-06-03 17:08:43 +08:00
);
}
});