[APM] Distribution histogram - Replaced custom tooltip with EuiIconTip (

elastic#32753) (elastic#32770) * Replaced with EuiIconTip
spalger · Mar 8, 2019 · 92c0c86 · 92c0c86
1 parent d4bb33d
commit 92c0c86
Showing 1 changed file with 17 additions and 27 deletions.
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/Distribution/index.tsx b/x-pack/plugins/apm/public/components/app/TransactionDetails/Distribution/index.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiIcon, EuiText, EuiTitle, EuiToolTip } from '@elastic/eui';
+import { EuiIconTip, EuiTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import d3 from 'd3';
 import { Location } from 'history';
@@ -138,32 +138,22 @@ export class TransactionDistribution extends Component<Props> {
                 defaultMessage: 'Transactions duration distribution'
               }
             )}{' '}
-            <EuiToolTip
-              content={
-                <div>
-                  <EuiText>
-                    <strong>
-                      {i18n.translate(
-                        'xpack.apm.transactionDetails.transactionsDurationDistributionChartTooltip.samplingLabel',
-                        {
-                          defaultMessage: 'Sampling'
-                        }
-                      )}
-                    </strong>
-                  </EuiText>
-                  <EuiText>
-                    {i18n.translate(
-                      'xpack.apm.transactionDetails.transactionsDurationDistributionChartTooltip.samplingDescription',
-                      {
-                        defaultMessage: `Each bucket will show a sample transaction. If there's no sample available, it's most likely because of the sampling limit set in the agent configuration.`
-                      }
-                    )}
-                  </EuiText>
-                </div>
-              }
-            >
-              <EuiIcon type="questionInCircle" />
-            </EuiToolTip>
+            <EuiIconTip
+              title={i18n.translate(
+                'xpack.apm.transactionDetails.transactionsDurationDistributionChartTooltip.samplingLabel',
+                {
+                  defaultMessage: 'Sampling'
+                }
+              )}
+              content={i18n.translate(
+                'xpack.apm.transactionDetails.transactionsDurationDistributionChartTooltip.samplingDescription',
+                {
+                  defaultMessage:
+                    "Each bucket will show a sample transaction. If there's no sample available, it's most likely because of the sampling limit set in the agent configuration."
+                }
+              )}
+              position="top"
+            />
           </h5>
         </EuiTitle>