Influxdata
/
chronograf
mirror of https://github.com/influxdata/chronograf.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fix Tooltip width for long source host:port strings 

Fix HTML in other tooltips

Signed-off-by: Alex Paxton <thealexpaxton@gmail.com>
pull/2069/head
Jared Scheib 2017-10-03 15:49:24 -07:00 committed by Alex Paxton
parent 65a92275b5
commit 44e79c5a01
4 changed files with 7 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/src/kapacitor/components/RuleHeaderEdit.js
View File

@ -24,7 +24,7 @@ const RuleHeaderEdit = ({
className="page-header__title page-header--editable kapacitor-theme" className="page-header__title page-header--editable kapacitor-theme"
onClick={onToggleEdit} onClick={onToggleEdit}
data-for="rename-kapacitor-tooltip" data-for="rename-kapacitor-tooltip"
data-tip="Click to Rename" data-tip={'<p>Click to Rename</p>'}
> >
{rule.name} {rule.name}
<span className="icon pencil" /> <span className="icon pencil" />

2
ui/src/shared/components/GraphTips.js
View File

@ -4,7 +4,7 @@ import ReactTooltip from 'react-tooltip'
const GraphTips = React.createClass({ const GraphTips = React.createClass({
render() { render() {
const graphTipsText = 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 ( return (
<div <div
className="graph-tips" className="graph-tips"

4
ui/src/sources/components/InfluxTable.js
View File

@ -103,7 +103,9 @@ const InfluxTable = ({
Active Kapacitor{' '} Active Kapacitor{' '}
<QuestionMarkTooltip <QuestionMarkTooltip
tipID="kapacitor-node-helper" 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> </th>
</tr> </tr>

4
ui/src/style/components/react-tooltips.scss
View File

@ -6,7 +6,6 @@
http://wwayne.com/react-tooltip/ http://wwayne.com/react-tooltip/
*/ */
$tooltip-max-width: 260px;
$tooltip-padding: 8px; $tooltip-padding: 8px;
$tooltip-radius: 5px; $tooltip-radius: 5px;
$tooltip-font: 13px; $tooltip-font: 13px;
@ -19,13 +18,13 @@ $tooltip-code-bg: $g2-kevlar;
$tooltip-code-color: $c-potassium; $tooltip-code-color: $c-potassium;
.influx-tooltip { .influx-tooltip {
width: min-content;
background-color: $tooltip-bg !important; background-color: $tooltip-bg !important;
color: $tooltip-text !important; color: $tooltip-text !important;
font-size: $tooltip-font !important; font-size: $tooltip-font !important;
font-weight: 500 !important; font-weight: 500 !important;
line-height: 1.3em !important; line-height: 1.3em !important;
padding: $tooltip-padding !important; padding: $tooltip-padding !important;
max-width: $tooltip-max-width !important;
white-space: pre-wrap !important; white-space: pre-wrap !important;
word-break: keep-all !important; word-break: keep-all !important;
border: 2px solid $tooltip-accent !important; border: 2px solid $tooltip-accent !important;
@ -47,6 +46,7 @@ $tooltip-code-color: $c-potassium;
width: 100%; width: 100%;
display: inline-block; display: inline-block;
padding: 0; padding: 0;
white-space: nowrap;
} }
code { code {