fix(explore): Filters Tooltip is not showing the full content (#14618)

* Add getTooltipTitle

* Fix tests

superset-frontend/src/explore/components/controls/FilterControl/AdhocFilter/index.js

@@ -142,6 +142,10 @@ export default class AdhocFilter {
     return label.length < 43 ? label : `${label.substring(0, 40)}...`;
   }
 
+  getTooltipTitle() {
+    return this.translateToSql();
+  }
+
   translateToSql() {
     return translateToSql(this);
   }

superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterOption/index.jsx

@@ -63,6 +63,7 @@ const AdhocFilterOption = ({
   >
     <OptionControlLabel
       label={adhocFilter.getDefaultLabel()}
+      tooltipTitle={adhocFilter.getTooltipTitle()}
       onRemove={onRemoveFilter}
       onMoveLabel={onMoveLabel}
       onDropLabel={onDropLabel}

superset-frontend/src/explore/components/controls/OptionControls/OptionControls.test.tsx

@@ -36,6 +36,7 @@ import {
 
 const defaultProps = {
   label: <span>Test label</span>,
+  tooltipTitle: 'This is a tooltip title',
   onRemove: jest.fn(),
   onMoveLabel: jest.fn(),
   onDropLabel: jest.fn(),

superset-frontend/src/explore/components/controls/OptionControls/index.tsx

@@ -167,6 +167,7 @@ export const OptionControlLabel = ({
   type,
   index,
   isExtra,
+  tooltipTitle,
   ...props
 }: {
   label: string | React.ReactNode;
@@ -181,6 +182,7 @@ export const OptionControlLabel = ({
   type: string;
   index: number;
   isExtra?: boolean;
+  tooltipTitle: string;
 }) => {
   const theme = useTheme();
   const ref = useRef<HTMLDivElement>(null);
@@ -246,7 +248,7 @@ export const OptionControlLabel = ({
     if (savedMetric?.metric_name) {
       return <StyledMetricOption metric={savedMetric} />;
     }
-    return <Tooltip title={label}>{label}</Tooltip>;
+    return <Tooltip title={tooltipTitle}>{label}</Tooltip>;
   };
 
   const getOptionControlContent = () => (