diff --git a/client/css/style.css b/client/css/style.css
index 57b2e8d8..9a8da7d3 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -1694,205 +1694,6 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	display: block;
 }
 
-/**
-  * Tooltips v0.5.3
-  * See http://primercss.io/tooltips/
-  */
-
-.tooltipped {
-	position: relative;
-}
-
-.tooltipped::after {
-	position: absolute;
-	z-index: 1000000;
-	display: none;
-	padding: 5px 8px;
-	font-size: 12px;
-	line-height: 1.2;
-	-webkit-font-smoothing: subpixel-antialiased;
-	color: #fff;
-	text-align: center;
-	text-decoration: none;
-	text-shadow: none;
-	text-transform: none;
-	letter-spacing: normal;
-	word-wrap: break-word;
-	white-space: pre;
-	pointer-events: none;
-	content: attr(aria-label);
-	background: #222;
-	border-radius: 3px;
-	opacity: 0;
-}
-
-.tooltipped::before {
-	position: absolute;
-	z-index: 1000001;
-	display: none;
-	width: 0;
-	height: 0;
-	color: #fff;
-	pointer-events: none;
-	content: "";
-	border: 5px solid transparent;
-	opacity: 0;
-}
-
-@-webkit-keyframes tooltip-appear {
-	from {
-		opacity: 0;
-	}
-
-	to {
-		opacity: 1;
-	}
-}
-
-@keyframes tooltip-appear {
-	from {
-		opacity: 0;
-	}
-
-	to {
-		opacity: 1;
-	}
-}
-
-.tooltipped:hover::before,
-.tooltipped:hover::after,
-.tooltipped:active::before,
-.tooltipped:active::after,
-.tooltipped:focus::before,
-.tooltipped:focus::after {
-	display: inline-block;
-	text-decoration: none;
-	-webkit-animation-name: tooltip-appear;
-	animation-name: tooltip-appear;
-	-webkit-animation-duration: 0.1s;
-	animation-duration: 0.1s;
-	-webkit-animation-fill-mode: forwards;
-	animation-fill-mode: forwards;
-	-webkit-animation-timing-function: ease-in;
-	animation-timing-function: ease-in;
-	-webkit-animation-delay: 0.4s;
-	animation-delay: 0.4s;
-}
-
-.tooltipped-no-delay:hover::before,
-.tooltipped-no-delay:hover::after,
-.tooltipped-no-delay:active::before,
-.tooltipped-no-delay:active::after,
-.tooltipped-no-delay:focus::before,
-.tooltipped-no-delay:focus::after {
-	-webkit-animation-delay: 0s;
-	animation-delay: 0s;
-}
-
-.tooltipped-s::after,
-.tooltipped-se::after,
-.tooltipped-sw::after {
-	top: 100%;
-	right: 50%;
-	margin-top: 5px;
-}
-
-.tooltipped-s::before,
-.tooltipped-se::before,
-.tooltipped-sw::before {
-	top: auto;
-	right: 50%;
-	bottom: -5px;
-	margin-right: -5px;
-	border-bottom-color: #222;
-}
-
-.tooltipped-se::after {
-	right: auto;
-	left: 50%;
-	margin-left: -15px;
-}
-
-.tooltipped-sw::after {
-	margin-right: -15px;
-}
-
-.tooltipped-n::after,
-.tooltipped-ne::after,
-.tooltipped-nw::after {
-	right: 50%;
-	bottom: 100%;
-	margin-bottom: 5px;
-}
-
-.tooltipped-n::before,
-.tooltipped-ne::before,
-.tooltipped-nw::before {
-	top: -5px;
-	right: 50%;
-	bottom: auto;
-	margin-right: -5px;
-	border-top-color: #222;
-}
-
-.tooltipped-ne::after {
-	right: auto;
-	left: 50%;
-	margin-left: -15px;
-}
-
-.tooltipped-nw::after {
-	margin-right: -15px;
-}
-
-.tooltipped-s::after,
-.tooltipped-n::after {
-	-webkit-transform: translateX(50%);
-	transform: translateX(50%);
-}
-
-.tooltipped-w::after {
-	right: 100%;
-	bottom: 50%;
-	margin-right: 5px;
-	-webkit-transform: translateY(50%);
-	transform: translateY(50%);
-}
-
-.tooltipped-w::before {
-	top: 50%;
-	bottom: 50%;
-	left: -5px;
-	margin-top: -5px;
-	border-left-color: #222;
-}
-
-.tooltipped-e::after {
-	bottom: 50%;
-	left: 100%;
-	margin-left: 5px;
-	-webkit-transform: translateY(50%);
-	transform: translateY(50%);
-}
-
-.tooltipped-e::before {
-	top: 50%;
-	right: -5px;
-	bottom: 50%;
-	margin-top: -5px;
-	border-right-color: #222;
-}
-
-@media
-	only screen and (min-resolution: 192dpi),
-	only screen and (min-resolution: 2dppx) {
-	.tooltipped-w::after {
-		margin-right: 4.5px;
-	}
-}
-
-/* End tooltips */
-
 /**
   * IRC Message Styling
   * Colours are credit to http://clrs.cc/
@@ -2114,6 +1915,10 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	font-style: italic;
 }
 
+.tooltipped::after {
+	font-size: 12px;
+}
+
 @media (min-width: 480px) {
 	/* Fade out for long usernames */
 
diff --git a/client/index.html b/client/index.html
index e51999d7..dd0bd3f9 100644
--- a/client/index.html
+++ b/client/index.html
@@ -8,6 +8,7 @@
 	<link rel="preload" as="script" href="js/bundle.vendor.js">
 	<link rel="preload" as="script" href="js/bundle.js">
 	<link rel="stylesheet" href="css/bootstrap.css">
+	<link rel="stylesheet" href="css/primer-tooltips.css">
 	<link rel="stylesheet" href="css/style.css">
 	<link id="theme" rel="stylesheet" href="<%- theme %>">
 	<style id="user-specified-css"></style>
diff --git a/package.json b/package.json
index 1a3d96f5..0cf417f7 100644
--- a/package.json
+++ b/package.json
@@ -51,6 +51,7 @@
     "lodash": "4.17.4",
     "moment": "2.20.1",
     "package-json": "4.0.1",
+    "primer-tooltips": "1.5.0",
     "read": "1.0.7",
     "request": "2.83.0",
     "semver": "5.4.1",
diff --git a/webpack.config.js b/webpack.config.js
index 0f38b7a8..45ea8e9b 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -90,6 +90,10 @@ const config = {
 				from: "./client/css/*",
 				to: "css/[name].[ext]",
 			},
+			{
+				from: "./node_modules/primer-tooltips/build/build.css",
+				to: "css/primer-tooltips.[ext]",
+			},
 		]),
 		// socket.io uses debug, we don't need it
 		new webpack.NormalModuleReplacementPlugin(/debug/, path.resolve(__dirname, "scripts/noop.js")),