removed EuiTooltip and added title

elastic · Jun 24, 2020 · d259b58 · d259b58
1 parent 6a3049f
commit d259b58
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 29 deletions.
diff --git a/src/plugins/discover/public/application/components/sidebar/discover_field_bucket.tsx b/src/plugins/discover/public/application/components/sidebar/discover_field_bucket.tsx
@@ -17,14 +17,7 @@
  * under the License.
  */
 import React from 'react';
-import {
-  EuiText,
-  EuiButtonIcon,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiSpacer,
-  EuiToolTip,
-} from '@elastic/eui';
+import { EuiText, EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { StringFieldProgressBar } from './string_progress_bar';
 import { Bucket } from './types';
@@ -53,29 +46,31 @@ export function DiscoverFieldBucket({ field, bucket, onAddFilter }: Props) {
     }
   );
 
-  const tooltipContent = `${bucket.value}: ${bucket.count} (${bucket.percent}%)`;
-
   return (
     <>
       <EuiFlexGroup justifyContent="spaceBetween" responsive={false} gutterSize="s">
         <EuiFlexItem className="dscFieldDetails__barContainer" grow={1}>
-          <EuiToolTip content={tooltipContent} delay="long" position="right">
-            <>
-              <EuiFlexGroup justifyContent="spaceBetween" gutterSize="xs" responsive={false}>
-                <EuiFlexItem grow={1} className="eui-textTruncate">
-                  <EuiText size="xs" className="eui-textTruncate">
-                    {bucket.display === '' ? emptyTxt : bucket.display}
-                  </EuiText>
-                </EuiFlexItem>
-                <EuiFlexItem grow={false} className="eui-textTruncate">
-                  <EuiText color="secondary" size="xs" className="eui-textTruncate">
-                    {bucket.percent}%
-                  </EuiText>
-                </EuiFlexItem>
-              </EuiFlexGroup>
-              <StringFieldProgressBar percent={bucket.percent} />
-            </>
-          </EuiToolTip>
+          <EuiFlexGroup justifyContent="spaceBetween" gutterSize="xs" responsive={false}>
+            <EuiFlexItem grow={1} className="eui-textTruncate">
+              <EuiText
+                title={bucket.display === '' ? emptyTxt : bucket.display}
+                size="xs"
+                className="eui-textTruncate"
+              >
+                {bucket.display === '' ? emptyTxt : bucket.display}
+              </EuiText>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false} className="eui-textTruncate">
+              <EuiText color="secondary" size="xs" className="eui-textTruncate">
+                {bucket.percent}%
+              </EuiText>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+          <StringFieldProgressBar
+            value={bucket.value}
+            percent={bucket.percent}
+            count={bucket.count}
+          />
         </EuiFlexItem>
         {field.filterable && (
           <EuiFlexItem grow={false}>

diff --git a/src/plugins/discover/public/application/components/sidebar/string_progress_bar.tsx b/src/plugins/discover/public/application/components/sidebar/string_progress_bar.tsx
@@ -21,8 +21,14 @@ import { EuiProgress } from '@elastic/eui';
 
 interface Props {
   percent: number;
+  count: number;
+  value: string;
 }
 
-export function StringFieldProgressBar({ percent }: Props) {
-  return <EuiProgress value={percent} max={100} color="secondary" aria-hidden={true} size="s" />;
+export function StringFieldProgressBar({ value, percent, count }: Props) {
+  const tooltipContent = `${value}: ${count} (${percent}%)`;
+
+  return (
+    <EuiProgress value={percent} max={100} color="secondary" aria-label={tooltipContent} size="s" />
+  );
 }