From 98d612e41225bf00dee082b2ef8b5866166790ea Mon Sep 17 00:00:00 2001
From: Jared Scheib <jared.scheib@gmail.com>
Date: Tue, 3 Oct 2017 15:49:24 -0700
Subject: [PATCH] Fix Tooltip width for long source host:port strings

Fix HTML in other tooltips

Signed-off-by: Alex Paxton <thealexpaxton@gmail.com>
---
 ui/src/kapacitor/components/RuleHeaderEdit.js | 2 +-
 ui/src/shared/components/GraphTips.js         | 2 +-
 ui/src/sources/components/InfluxTable.js      | 4 +++-
 ui/src/style/components/react-tooltips.scss   | 4 ++--
 4 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/ui/src/kapacitor/components/RuleHeaderEdit.js b/ui/src/kapacitor/components/RuleHeaderEdit.js
index 697db18275..696f561ee7 100644
--- a/ui/src/kapacitor/components/RuleHeaderEdit.js
+++ b/ui/src/kapacitor/components/RuleHeaderEdit.js
@@ -24,7 +24,7 @@ const RuleHeaderEdit = ({
           className="page-header__title page-header--editable kapacitor-theme"
           onClick={onToggleEdit}
           data-for="rename-kapacitor-tooltip"
-          data-tip="Click to Rename"
+          data-tip={'<p>Click to Rename</p>'}
         >
           {rule.name}
           <span className="icon pencil" />
diff --git a/ui/src/shared/components/GraphTips.js b/ui/src/shared/components/GraphTips.js
index edf0193b78..69d8b08502 100644
--- a/ui/src/shared/components/GraphTips.js
+++ b/ui/src/shared/components/GraphTips.js
@@ -4,7 +4,7 @@ import ReactTooltip from 'react-tooltip'
 const GraphTips = React.createClass({
   render() {
     const graphTipsText =
-      '<h1>Graph Tips:</h1><p><code>Click + Drag</code> Zoom in (X or Y)</p><p><code>Shift + Click</code> Pan Graph Window</p><p><code>Double Click</code> Reset Graph Window</p>'
+      '<h1>Graph Tips:</h1><p><code>Click + Drag</code> Zoom in (X or Y)<br/><code>Shift + Click</code> Pan Graph Window<br/><code>Double Click</code> Reset Graph Window</p>'
     return (
       <div
         className="graph-tips"
diff --git a/ui/src/sources/components/InfluxTable.js b/ui/src/sources/components/InfluxTable.js
index d690c3597d..7259fa02f4 100644
--- a/ui/src/sources/components/InfluxTable.js
+++ b/ui/src/sources/components/InfluxTable.js
@@ -103,7 +103,9 @@ const InfluxTable = ({
                   Active Kapacitor{' '}
                   <QuestionMarkTooltip
                     tipID="kapacitor-node-helper"
-                    tipContent="Kapacitor Configurations are scoped per InfluxDB Source. Only one can be active at a time"
+                    tipContent={
+                      '<p>Kapacitor Configurations are scoped per InfluxDB Source.<br/>Only one can be active at a time.</p>'
+                    }
                   />
                 </th>
               </tr>
diff --git a/ui/src/style/components/react-tooltips.scss b/ui/src/style/components/react-tooltips.scss
index f12ab3c88e..ab27a9a24f 100644
--- a/ui/src/style/components/react-tooltips.scss
+++ b/ui/src/style/components/react-tooltips.scss
@@ -6,7 +6,6 @@
     http://wwayne.com/react-tooltip/
 */
 
-$tooltip-max-width: 260px;
 $tooltip-padding: 8px;
 $tooltip-radius: 5px;
 $tooltip-font: 13px;
@@ -19,13 +18,13 @@ $tooltip-code-bg: $g2-kevlar;
 $tooltip-code-color: $c-potassium;
 
 .influx-tooltip {
+  width: min-content;
   background-color: $tooltip-bg !important;
   color: $tooltip-text !important;
   font-size: $tooltip-font !important;
   font-weight: 500 !important;
   line-height: 1.3em !important;
   padding: $tooltip-padding !important;
-  max-width: $tooltip-max-width !important;
   white-space: pre-wrap !important;
   word-break: keep-all !important;
   border: 2px solid $tooltip-accent !important;
@@ -47,6 +46,7 @@ $tooltip-code-color: $c-potassium;
     width: 100%;
     display: inline-block;
     padding: 0;
+    white-space: nowrap;
   }
 
   code {