port help element

src/ui/components/common/HelpButton.tsx

@@ -2,8 +2,10 @@ import React from 'react'
 
 import './HelpButton.css'
 import Help from '../../../resources/icons/help.svg'
+import MiniDialog from '../MiniDialog'
 
 interface IProps {
+  contents: string
   id?: string
 }
 
@@ -14,14 +16,37 @@ interface IState {
 export default class HelpButton extends React.Component<IProps, IState> {
   constructor(props: IProps) {
     super(props)
+
+    this.state = {
+      opened: false
+    }
+
+    this.setOpen = this.setOpen.bind(this)
+    this.setClosed = this.setClosed.bind(this)
+  }
+
+  setOpen() {
+    this.setState({ opened: true })
+  }
+
+  setClosed() {
+    this.setState({ opened: false })
   }
 
   render() {
     return (
       <div className="HelpSection">
-        <div className="HelpButton">
+        <div className="HelpButton" onMouseEnter={this.setOpen} onMouseLeave={this.setClosed}>
           <img src={Help} />
         </div>
+
+        <div className="HelpContents" style={{
+          display: this.state.opened ? 'block' : 'none'
+        }}>
+          <MiniDialog closeFn={this.setClosed}>
+            {this.props.contents}
+          </MiniDialog>
+        </div>
       </div>
     )
   }