fix(host,vm): use stacked value text in a tooltip for stats

src/common/intl/messages.js

@@ -429,7 +429,7 @@ var messages = {
   statsCpu: 'CPU usage',
   statsMemory: 'Memory usage',
   statsNetwork: 'Network throughput',
-  useCombinedValuesOnStats: 'Use combined values:',
+  useStackedValuesOnStats: 'Stacked values',
   statDisk: 'Disk throughput',
   statLastTenMinutes: 'Last 10 minutes',
   statLastTwoHours: 'Last 2 hours',

src/xo-app/host/tab-stats.js

@@ -2,6 +2,7 @@ import _ from 'intl'
 import Component from 'base-component'
 import Icon from 'icon'
 import React from 'react'
+import Tooltip from 'tooltip'
 import Upgrade from 'xoa-upgrade'
 import { Container, Row, Col } from 'grid'
 import { Toggle } from 'form'
@@ -95,9 +96,9 @@ export default class HostStats extends Component {
           <Row>
             <Col mediumSize={6}>
               <div className='form-group'>
-                <label>{_('useCombinedValuesOnStats')}</label>
-                {' '}
-                <Toggle value={useCombinedValues} onChange={this.linkState('useCombinedValues')} />
+                <Tooltip content={_('useStackedValuesOnStats')}>
+                  <Toggle value={useCombinedValues} onChange={this.linkState('useCombinedValues')} />
+                </Tooltip>
               </div>
               {selectStatsLoading && (
                 <div className='text-xs-right'>

src/xo-app/vm/tab-stats.js

@@ -2,6 +2,7 @@ import _, { messages } from 'intl'
 import Component from 'base-component'
 import Icon from 'icon'
 import React from 'react'
+import Tooltip from 'tooltip'
 import Upgrade from 'xoa-upgrade'
 import { fetchVmStats } from 'xo'
 import { Toggle } from 'form'
@@ -100,9 +101,9 @@ export default injectIntl(
             <Row>
               <Col mediumSize={6}>
                 <div className='form-group'>
-                  <label>{_('useCombinedValuesOnStats')}</label>
-                  {' '}
-                  <Toggle value={useCombinedValues} onChange={this.linkState('useCombinedValues')} />
+                  <Tooltip content={_('useStackedValuesOnStats')}>
+                    <Toggle value={useCombinedValues} onChange={this.linkState('useCombinedValues')} />
+                  </Tooltip>
                 </div>
                 {selectStatsLoading && (
                   <div className='text-xs-right'>