UI tweaks

app/assets/stylesheets/govuk-frontend/overrides.scss

@@ -65,4 +65,121 @@
 
 .govuk-header__logotype-text {
   margin-left: 5px !important;
+}
+
+// TODO: probably move these to a separate file
+
+.demo-tooltip {
+  position: relative;
+  color: #FFF;
+}
+
+.demo-tooltip a {
+  pointer-events: none;
+}
+
+.demo-tooltip:before,
+.demo-tooltip:after {
+  position: absolute;
+  content: '';
+  opacity: 0;
+  transition: all 0.4s ease;
+  pointer-events: none;
+  color: white;
+}
+
+.demo-tooltip:hover:before,
+.demo-tooltip:hover:after {
+  opacity: 1;
+  transform: translateY(-2px);
+}
+
+.demo-tooltip:before {
+  border-width: 10px 8px 0 8px;
+  border-style: solid;
+  border-color: red transparent transparent transparent;
+  top: -15px;
+  transform: translateY(20px);
+}
+
+.demo-tooltip:after {
+  content: attr(data-demo-tooltip);
+  background: red;
+  width: 160px;
+  height: 40px;
+  font-size: 13px;
+  font-weight: 300;
+  top: -75px;
+  left: -10px;
+  padding: 10px;
+  border-radius: 5px;
+  letter-spacing: 1px;
+  transform: translateY(20px);
+}
+
+
+
+// alt tooltip
+// .tooltip-demo {
+//   position: relative;
+// }
+
+// .tooltip-demo:before,
+// .tooltip-demo:after {
+//   display: block;
+//   opacity: 0;
+//   pointer-events: none;
+//   position: absolute;
+//   transform: translate3d(0, -10px, 0);
+//   transition: all .15s ease-in-out;
+// }
+
+// .tooltip-demo:hover:before,
+// .tooltip-demo:hover:after {
+//   opacity: 1;
+//   transform: translate3d(0, 0, 0);
+// }
+
+// .tooltip-demo:after {
+//   border-right: 6px solid transparent;
+//   border-bottom: 6px solid rgba(0, 0, 0, .75);
+//   border-left: 6px solid transparent;
+//   content: '';
+//   height: 0;
+//   top: 20px;
+//   left: 20px;
+//   width: 0;
+// }
+
+// .tooltip-demo:before {
+//   background: rgba(0, 0, 0, .75);
+//   border-radius: 2px;
+//   color: #fff;
+//   content: attr(data-demo-tooltip);
+//   font-size: 14px;
+//   padding: 6px 10px;
+//   top: 26px;
+//   white-space: nowrap;
+// }
+
+@keyframes shake {
+  0% {
+    transform: rotate(2deg);
+  }
+
+  50% {
+    transform: rotate(-3deg);
+  }
+
+  70% {
+    transform: rotate(3deg);
+  }
+
+  100% {
+    transform: rotate(0deg);
+  }
+}
+
+.demo-tooltip:hover {
+  animation: shake 500ms ease-in-out forwards;
 }