Add tooltips for hotkeys

app/lib/components/Me.jsx

@@ -110,6 +110,10 @@ class Me extends React.Component
 					{connected ?
 						<div className={classnames('controls', 'visible')}>
 							<div
+								data-tip='keyboard shortcut: &lsquo;m&lsquo;'
+								data-type='dark'
+								data-place='bottom'
+								data-for='me'
 								className={classnames('button', 'mic', micState, {
 									disabled : me.audioInProgress,
 									visible  : micState == 'off' || this.state.controlsVisible
@@ -119,7 +123,10 @@ class Me extends React.Component
 									micState === 'on' ? onMuteMic() : onUnmuteMic();
 								}}
 							/>
-
+							<ReactTooltip
+								id='me'
+								effect='solid'
+							/>
 							<div
 								className={classnames('button', 'webcam', webcamState, {
 									disabled : me.webcamInProgress,
@@ -160,15 +167,6 @@ class Me extends React.Component
 					</div>
 					:null
 				}
-
-				{this._tooltip ?
-					<ReactTooltip
-						effect='solid'
-						delayShow={100}
-						delayHide={100}
-					/>
-					:null
-				}
 			</div>
 		);
 	}

app/lib/components/Settings.jsx

@@ -5,6 +5,7 @@ import * as requestActions from '../redux/requestActions';
 import * as stateActions from '../redux/stateActions';
 import PropTypes from 'prop-types';
 import Dropdown from 'react-dropdown';
+import ReactTooltip from 'react-tooltip';
 
 const modes = [ {
 	value : 'democratic',
@@ -58,20 +59,34 @@ const Settings = ({
 					onChange={(device) => handleChangeAudioDevice(device.value)}
 					placeholder={audioDevicesText}
 				/>
-
+				<ReactTooltip
-				<input
+					effect='solid'
-					id='room-mode'
-					type='checkbox'
-					checked={room.advancedMode}
-					onChange={onToggleAdvancedMode}
 				/>
-				<label htmlFor='room-mode'>Advanced mode</label>
+				<div
+					data-tip='keyboard shortcut: &lsquo;a&lsquo;'
+					data-type='dark'
+					data-place='left'
+				>
+					<input
+						id='room-mode'
+						type='checkbox'
+						checked={room.advancedMode}
+						onChange={onToggleAdvancedMode}
+					/>
+					<label htmlFor='room-mode'>Advanced mode</label>
+				</div>
 
-				<Dropdown
+				<div
-					options={modes}
+					data-tip='keyboard shortcut: type a digit'
-					value={findOption(modes, room.mode)}
+					data-type='dark'
-					onChange={(mode) => handleChangeMode(mode.value)}
+					data-place='left'
-				/>
+				>
+					<Dropdown
+						options={modes}
+						value={findOption(modes, room.mode)}
+						onChange={(mode) => handleChangeMode(mode.value)}
+					/>
+				</div>
 			</div>
 		</div>
 	);