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={'
Click to Rename
'}
>
{rule.name}
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 =
- 'Graph Tips:
Click + Drag
Zoom in (X or Y)
Shift + Click
Pan Graph Window
Double Click
Reset Graph Window
'
+ 'Graph Tips:
Click + Drag
Zoom in (X or Y)
Shift + Click
Pan Graph Window
Double Click
Reset Graph Window
'
return (
Kapacitor Configurations are scoped per InfluxDB Source.
Only one can be active at a time.'
+ }
/>
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 {