User bio, onClick and onMouseOver - Styles and Tooltip

client/coral-plugin-author-name/AuthorName.js

@@ -1,51 +1,47 @@
 import React, {Component} from 'react';
 import {Tooltip} from 'coral-ui';
-import FlagBio from '../coral-plugin-flags/FlagBio';
+import FlagBio from 'coral-plugin-flags/FlagBio';
 const packagename = 'coral-plugin-author-name';
+import styles from './styles.css';
 
 export default class AuthorName extends Component {
-  constructor (props) {
-    super(props);
 
-    this.state = {
-      showTooltip: false
-    };
+  state = {showTooltip: false}
 
-    this.handleMouseOver = this.handleMouseOver.bind(this);
-    this.handleMouseLeave = this.handleMouseLeave.bind(this);
+  handleClick = () => {
+    this.setState(state => ({
+      showTooltip: !state.showTooltip
+    }));
   }
 
-  handleMouseOver () {
-    this.setState({
-      showTooltip: true
-    });
-  }
-
-  handleMouseLeave () {
-    this.setState({
-      showTooltip: false
-    });
+  handleMouseLeave = () => {
+    setTimeout(() => {
+      this.setState({
+        showTooltip: false
+      });
+    }, 500);
   }
 
   render () {
     const {author} = this.props;
     const {showTooltip} = this.state;
     return (
-      <div
-        className={`${packagename}-text`}
-        onMouseOver={this.handleMouseOver}
-        onMouseLeave={this.handleMouseLeave}
-      >
-        {author && author.name}
-        { showTooltip && author.settings.bio && <Tooltip>
+      <div className={`${packagename}-text ${styles.container}`} onClick={this.handleClick} onMouseLeave={this.handleMouseLeave}>
+        <a className={styles.authorName}>
+          {author && author.name}
+          {author.settings.bio ? <span className={`${styles.arrowDown} ${showTooltip ? styles.arrowUp : ''}`} /> : null}
+        </a>
+        {showTooltip && author.settings.bio
+          && (
+          <Tooltip>
             <div className={`${packagename}-bio`}>
               {author.settings.bio}
             </div>
             <div className={`${packagename}-bio-flag`}>
               <FlagBio  {...this.props}/>
             </div>
-            </Tooltip>
-        }
+          </Tooltip>
+        )}
       </div>
     );
   }

client/coral-plugin-author-name/styles.css

@@ -0,0 +1,32 @@
+.authorName {
+  color: black;
+  display: inline-block;
+  margin: 10px 0;
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.arrowDown {
+  top: 0;
+  width: 0;
+  height: 0;
+  margin-top: -2px;
+  margin-left: 2px;
+  display: inline-block;
+  vertical-align: middle;
+  border-bottom: 0;
+  border-left: 3px solid transparent;
+  border-right: 3px solid transparent;
+  border-top: 3px solid #000000;
+}
+
+.arrowUp {
+  width: 0;
+  height: 0;
+  border-top: 0;
+  border-left: 3px solid transparent;
+  border-right: 3px solid transparent;
+  border-bottom: 3px solid black;
+}

client/coral-ui/components/Tooltip.css

@@ -3,7 +3,7 @@
   position: absolute;
   width: 100%;
   border: solid 1px #2376D8;
-  top: 33px;
+  top: 48px;
   left: 0;
   box-sizing: border-box;
   background: white;