Improve tooltip styling

Author: kevva

app/renderer/components/Tooltip.js

@@ -40,16 +40,22 @@ class Tooltip extends React.PureComponent {
 						{state => (
 							<div
 								ref={ref}
-								className={classNames('Tooltip', `Tooltip--${state}`)}
+								className={classNames(
+									'Tooltip',
+									`Tooltip--${state}`,
+									`Tooltip--${placement}`
+								)}
 								style={{
 									...style,
 									transitionDuration: `${animationDuration}ms`,
 								}}
 							>
-								{content}
+								<div className="Tooltip__content">
+									{content}
+								</div>
 								<div
 									ref={arrowProps.ref}
-									className={classNames('Tooltip__arrow', `Tooltip__arrow--${placement}`)}
+									className="Tooltip__arrow"
 									style={arrowProps.style}
 								/>
 							</div>
@@ -63,7 +69,12 @@ class Tooltip extends React.PureComponent {
 			<Manager>
 				<Reference>
 					{({ref}) => (
-						<div ref={ref} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
+						<div
+							ref={ref}
+							style={{display: 'inlineBlock'}}
+							onMouseEnter={this.handleMouseEnter}
+							onMouseLeave={this.handleMouseLeave}
+						>
 							{children}
 						</div>
 					)}

app/renderer/components/Tooltip.scss

@@ -1,39 +1,93 @@
 .Tooltip {
-	background-color: var(--border-color);
-	border-radius: 4px;
-	font-size: 13px;
+	--color: var(--border-color);
+	--arrow-height: 8px;
+	--arrow-width: 12px;
+
 	opacity: 0;
-	padding: 8px 10px;
 	transition: opacity ease-in-out;
 
-	&--entered {
-		opacity: 1;
+	&__content {
+		background-color: var(--color);
+		border-radius: 4px;
+		font-size: 13px;
+		padding: 8px 10px;
+		text-align: center;
 	}
 
 	&__arrow {
+		display: block;
+		height: var(--arrow-height);
 		position: absolute;
-		width: 16px;
-		height: 24px;
+		width: var(--arrow-width);
 
 		&:before {
+			border-color: transparent;
 			border-style: solid;
 			content: '';
-			display: block;
-			height: 0;
-			margin: auto;
-			width: 0;
+			position: absolute;
 		}
+	}
+
+	&--entered {
+		opacity: 1;
+	}
 
-		&--top {
+	&--top {
+		padding: var(--arrow-height) 0;
+
+		.Tooltip__arrow {
 			bottom: 0;
-			height: calc(24px / 3);
+
+			&:before {
+				border-top-color: var(--color);
+				border-width: var(--arrow-height) calc(var(--arrow-width) / 2) 0;
+				top: 0;
+			}
+		}
+	}
+
+	&--right {
+		padding: 0 var(--arrow-height);
+
+		.Tooltip__arrow {
+			height: var(--arrow-width);
 			left: 0;
-			margin-bottom: calc(-24px / 3);
-			width: 16px;
+			width: var(--arrow-height);
+
+			&:before {
+				border-right-color: var(--color);
+				border-width: calc(var(--arrow-width) / 2) var(--arrow-height) calc(var(--arrow-width) / 2) 0;
+				right: 0;
+			}
+		}
+	}
+
+	&--bottom {
+		padding: var(--arrow-height) 0;
+
+		.Tooltip__arrow {
+			top: 0;
+
+			&:before {
+				border-bottom-color: var(--color);
+				border-width: 0 calc(var(--arrow-width) / 2) var(--arrow-height);
+				bottom: 0;
+			}
+		}
+	}
+
+	&--left {
+		padding: 0 var(--arrow-height);
+
+		.Tooltip__arrow {
+			height: var(--arrow-width);
+			right: 0;
+			width: var(--arrow-height);
 
 			&:before {
-				border-color: var(--border-color) transparent transparent transparent;
-				border-width: calc(24px / 3) 8px 0 8px;
+				border-left-color: var(--color);
+				border-width: calc(var(--arrow-width) / 2) 0 calc(var(--arrow-width) / 2) var(--arrow-height);
+				left: 0;
 			}
 		}
 	}