Add whotracksme info popover

Closes #364

client/src/components/ui/Popover.css

@@ -0,0 +1,86 @@
+.popover-wrap {
+    position: relative;
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.popover__trigger {
+    position: relative;
+    top: 3px;
+    margin: 0 8px;
+    cursor: pointer;
+}
+
+.popover__trigger:after {
+    content: "";
+    position: absolute;
+    top: -6px;
+    left: -3px;
+    width: 26px;
+    height: 24px;
+}
+
+.popover__body {
+    content: "";
+    display: flex;
+    position: absolute;
+    min-width: 275px;
+    bottom: calc(100% + 3px);
+    left: 50%;
+    padding: 10px 15px;
+    font-size: 0.8rem;
+    white-space: normal;
+    color: #fff;
+    background-color: #585965;
+    border-radius: 3px;
+    transition: opacity 0.2s ease-in-out, visibility  0.2s ease-in-out;
+    transform: translateX(-50%);
+    visibility: hidden;
+    opacity: 0;
+}
+
+.popover__body:after {
+    content: "";
+    position: absolute;
+    bottom: -5px;
+    left: calc(50% - 6px);
+    width: 0;
+    height: 0;
+    border-left: 6px solid transparent;
+    border-right: 6px solid transparent;
+    border-top: 6px solid #585965;
+}
+
+.popover__trigger:hover + .popover__body,
+.popover__body:hover {
+    visibility: visible;
+    opacity: 1;
+}
+
+.popover__icon {
+    width: 20px;
+    height: 20px;
+    stroke: #9aa0ac;
+}
+
+.popover__list-title {
+    margin-bottom: 3px;
+}
+
+.popover__list-item {
+    margin-bottom: 2px;
+}
+
+.popover__list-item:last-child {
+    margin-bottom: 0;
+}
+
+.popover__link {
+    font-size: 0.7rem;
+    color: #66b586;
+}
+
+.popover__link:hover,
+.popover__link:focus {
+    color: #66b586;
+}

client/src/components/ui/Popover.js

@@ -0,0 +1,40 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import './Popover.css';
+
+class Popover extends Component {
+    render() {
+        const { data } = this.props;
+
+        return (
+            <div className="popover-wrap">
+                <div className="popover__trigger">
+                    <svg className="popover__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
+                </div>
+                <div className="popover__body">
+                    <div className="popover__list">
+                        <div className="popover__list-title">
+                            This domain belongs to a known tracker.
+                        </div>
+                        <div className="popover__list-item">
+                            Name: <strong>{data.name}</strong>
+                        </div>
+                        <div className="popover__list-item">
+                            Category: <strong>{data.category}</strong>
+                        </div>
+                        <div className="popover__list-item">
+                            <a href={`https://whotracks.me/trackers/${data.id}.html`} className="popover__link" target="_blank" rel="noopener noreferrer">More information on Whotracksme</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+Popover.propTypes = {
+    data: PropTypes.object.isRequired,
+};
+
+export default Popover;

client/src/components/ui/ReactTable.css

@@ -4,6 +4,10 @@
     overflow: visible;
 }
 
+.ReactTable .rt-tbody {
+    overflow: visible;
+}
+
 .rt-tr-group .red {
     background-color: #fff4f2;
 }

client/src/components/ui/Tooltip.css

@@ -16,7 +16,7 @@
     content: attr(data-tooltip);
     display: block;
     position: absolute;
-    bottom: calc(100% + 12px);
+    bottom: calc(100% + 10px);
     left: 50%;
     padding: 10px 15px;
     font-size: 0.85rem;
@@ -32,7 +32,7 @@
 .tooltip-custom:after {
     content: "";
     position: relative;
-    top: -9px;
+    top: -7px;
     left: calc(50% - 6px);
     visibility: hidden;
     opacity: 0;

client/src/components/ui/Tooltip.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import './Tooltip.css';
 
 const Tooltip = props => (
-    <div data-tooltip={props.text} className={`tooltip-custom ${props.type}`}></div>
+    <div data-tooltip={props.text} className={`tooltip-custom ${props.type || ''}`}></div>
 );
 
 Tooltip.propTypes = {