zent
Version:
一套前端设计语言和基于React的实现
71 lines (62 loc) • 1.23 kB
Markdown
order: 4
zh-CN:
title: 外部控制显示隐藏
open: 打开
close: 关闭
content: 可以在 Tooltip 外部关闭
btn: 外部关闭
en-US:
title: Control visibility from outside
open: Open
close: Close
content: You can close Tooltip from outside
btn: Close from outside
```jsx
import { Tooltip, Button } from 'zent';
class NoneTriggerDemo extends Component {
state = {
visible: false,
};
close = () => {
this.setState({
visible: false,
});
};
open = () => {
this.setState({
visible: true,
});
};
render() {
const content = (
<div>
<p style={{ marginBottom: 10 }}>{i18n.content}</p>
</div>
);
return (
<div className="zent-doc-tooltip-none-trigger-container">
<Tooltip title={content} trigger="none" visible={this.state.visible}>
<Button type="primary" onClick={this.open}>
{i18n.open}
</Button>
</Tooltip>
<Button disabled={!this.state.visible} onClick={this.close}>
{i18n.btn}
</Button>
</div>
);
}
}
ReactDOM.render(<NoneTriggerDemo />, mountNode);
```
<style>
.zent-doc-tooltip-none-trigger-container {
display: flex;
justify-content: left;
.zent-tooltip-wrapper {
margin-right: 10px;
}
}
</style>