Context menu listens to explicit touch/mouse events rather than generic click

src/js/components/ContextMenu.js

@@ -21,18 +21,21 @@ class ContextMenu extends React.Component{
 		this.state = {
 			submenu_expanded: false
 		}
-		this.handleScroll = this.handleScroll.bind(this)
+		this.handleScroll = this.handleScroll.bind(this);
-		this.handleClick = this.handleClick.bind(this)
+		this.handleMouseDown = this.handleMouseDown.bind(this);
+		this.handleTouchEnd = this.handleTouchEnd.bind(this);
 	}
 
 	componentDidMount(){
-		window.addEventListener("scroll", this.handleScroll, false)
+		window.addEventListener("scroll", this.handleScroll, false);
-		window.addEventListener("click", this.handleClick, false)
+		window.addEventListener("mousedown", this.handleMouseDown, false);
+		window.addEventListener("touchend", this.handleTouchEnd, false);
 	}
 
 	componentWillUnmount(){		
-		window.removeEventListener("scroll", this.handleScroll, false)
+		window.removeEventListener("scroll", this.handleScroll, false);
-		window.removeEventListener("click", this.handleClick, false)
+		window.removeEventListener("mousedown", this.handleMouseDown, false);
+		window.removeEventListener("touchend", this.handleTouchEnd, false);
 	}
 
 	componentWillReceiveProps(nextProps){
@@ -74,8 +77,16 @@ class ContextMenu extends React.Component{
 		}
 	}
 
+	handleTouchEnd(e){
+		this.handleClick(e);
+	}
+
+	handleMouseDown(e){
+		this.handleClick(e);
+	}
+
 	handleClick(e){
-		// if we click outside of the context menu or context menu trigger, kill it
+		// if we click (touch or mouse) outside of the context menu or context menu trigger, kill it
 		if ($(e.target).closest('.context-menu').length <= 0 && $(e.target).closest('.context-menu-trigger').length <= 0){
 			this.props.uiActions.hideContextMenu()
 		}

src/js/components/ContextMenuTrigger.js

@@ -8,6 +8,18 @@ export default class ContextMenuTrigger extends React.Component{
 		super(props);
 	}
 
+	handleMouseDown(e){
+		e.preventDefault();
+		e.stopPropagation();
+		this.props.onTrigger(e);
+	}
+
+	handleTouchEnd(e){
+		e.preventDefault();
+		e.stopPropagation();
+		this.props.onTrigger(e);
+	}
+
 	render(){
 		var className = 'context-menu-trigger'
 		if (this.props.className){
@@ -15,8 +27,8 @@ export default class ContextMenuTrigger extends React.Component{
 		}
 		return (
 			<span className={className}
-				onMouseDown={e => this.props.onTrigger(e)}
+				onMouseDown={e => this.handleMouseDown(e)}
-				onTouchEnd={e => this.props.onTrigger(e)}>
+				onTouchEnd={e => this.handleTouchEnd(e)}>
 					<span className="dot"></span>
 					<span className="dot"></span>
 					<span className="dot"></span>

src/scss/components/_tooltip.scss

@@ -13,12 +13,12 @@
 		padding: 5px 8px;
 		color: $white;
 		font-size: 11px;
-		line-height: 11px;
+		line-height: 12px;
-		top: -24px;
+		bottom: 37px;
 		left: 1px;
 		z-index: 97;
 		border-radius: 3px;
-		white-space: nowrap;
+		white-space: wrap;
 
 		&:first-letter {
 			text-transform: uppercase;
@@ -42,7 +42,7 @@
 	&:hover {
 		.tooltip {
 			opacity: 1;
-			top: -22px;
+			bottom: 35px;
 		}
 	}
 
@@ -51,7 +51,7 @@
 			padding: 8px 12px;
 			font-size: 12px;
 			line-height: 14px;
-			top: -50px;
+			bottom: 50px;
 		}
 	}
 }