Unify tooltip styles

Made a local tooltip component for replicating our tooltip styles wherever we use tooltips.

Applied that tooltip to other items that had tooltips.

2 files changed, 23 insertions, 2 deletions

diff --git a/ui/app/components/copyButton.js b/ui/app/components/copyButton.js
index 182d7a670..a01603585 100644
--- a/ui/app/components/copyButton.js
+++ b/ui/app/components/copyButton.js
@@ -3,7 +3,7 @@ const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const copyToClipboard = require('copy-to-clipboard')
 
-const Tooltip = require('react-tooltip-component')
+const Tooltip = require('./tooltip')
 
 module.exports = CopyButton
 
@@ -32,7 +32,6 @@ CopyButton.prototype.render = function () {
   }, [
 
     h(Tooltip, {
-      position: 'top',
       title: message,
     }, [
       h('i.fa.fa-clipboard.cursor-pointer.color-orange', {
diff --git a/ui/app/components/tooltip.js b/ui/app/components/tooltip.js
new file mode 100644
index 000000000..4eab8611e
--- /dev/null
+++ b/ui/app/components/tooltip.js
@@ -0,0 +1,22 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const ReactTooltip = require('react-tooltip-component')
+
+module.exports = Tooltip
+
+inherits(Tooltip, Component)
+function Tooltip () {
+  Component.call(this)
+}
+
+Tooltip.prototype.render = function () {
+  const props = this.props
+
+  return h(ReactTooltip, {
+    position: 'left',
+    title: props.title,
+    fixed: false,
+  }, props.children)
+
+}