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 {