diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/package.json b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/package.json
index d9c55b2ec0de..09a3889f334f 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/package.json
+++ b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/package.json
@@ -33,6 +33,7 @@
"peerDependencies": {
"@types/react": "*",
"@types/react-bootstrap": "*",
+ "antd": "^4.9.1",
"react": "^16.13.1",
"react-bootstrap": "^0.33.1"
}
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/src/components/ColumnOption.tsx b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/src/components/ColumnOption.tsx
index f5c6ca4186ce..8403ba38d61d 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/src/components/ColumnOption.tsx
+++ b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/src/components/ColumnOption.tsx
@@ -17,7 +17,7 @@
* under the License.
*/
import React from 'react';
-
+import { Tooltip } from './Tooltip';
import { ColumnTypeLabel } from './ColumnTypeLabel';
import InfoTooltipWithTrigger from './InfoTooltipWithTrigger';
import { ColumnMeta } from '../types';
@@ -40,13 +40,21 @@ export function ColumnOption({ column, showType = false }: ColumnOptionProps) {
return (
{showType && columnType && }
- {column.verbose_name || column.column_name}
+
+ {column.verbose_name || column.column_name}
+
{column.description && (
)}
{hasExpression && (
@@ -55,6 +63,7 @@ export function ColumnOption({ column, showType = false }: ColumnOptionProps) {
icon="question-circle-o"
tooltip={column.expression}
label={`expr-${column.column_name}`}
+ placement="top"
/>
)}
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/src/components/InfoTooltipWithTrigger.tsx b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/src/components/InfoTooltipWithTrigger.tsx
index 8b89270a6ea4..ec78e1c9afad 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/src/components/InfoTooltipWithTrigger.tsx
+++ b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/src/components/InfoTooltipWithTrigger.tsx
@@ -16,19 +16,18 @@
* specific language governing permissions and limitations
* under the License.
*/
-import React, { CSSProperties } from 'react';
+import React from 'react';
import { kebabCase } from 'lodash';
-import { Tooltip, OverlayTrigger } from 'react-bootstrap';
+import { TooltipPlacement } from 'antd/lib/tooltip';
import { t } from '@superset-ui/core';
-
-const tooltipStyle: CSSProperties = { wordWrap: 'break-word' };
+import { Tooltip } from './Tooltip';
export interface InfoTooltipWithTriggerProps {
label?: string;
tooltip?: string;
icon?: string;
onClick?: () => void;
- placement?: string;
+ placement?: TooltipPlacement;
bsStyle?: string;
className?: string;
}
@@ -65,16 +64,9 @@ export function InfoTooltipWithTrigger({
return iconEl;
}
return (
-
- {tooltip}
-
- }
- >
+
{iconEl}
-
+
);
}
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/src/components/Tooltip.tsx b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/src/components/Tooltip.tsx
new file mode 100644
index 000000000000..71b73a683423
--- /dev/null
+++ b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/src/components/Tooltip.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { useTheme } from '@superset-ui/core';
+import { Tooltip as BaseTooltip } from 'antd';
+import { TooltipProps } from 'antd/lib/tooltip';
+
+export const Tooltip = ({ overlayStyle, color, ...props }: TooltipProps) => {
+ const theme = useTheme();
+ const defaultColor = `${theme.colors.grayscale.dark2}e6`;
+ return (
+
+ );
+};
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/test/components/InfoTooltipWithTrigger.test.tsx b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/test/components/InfoTooltipWithTrigger.test.tsx
index 3c5a406c832b..9e0dacc1c77d 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/test/components/InfoTooltipWithTrigger.test.tsx
+++ b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/test/components/InfoTooltipWithTrigger.test.tsx
@@ -18,13 +18,13 @@
*/
import React from 'react';
import { shallow } from 'enzyme';
-import { OverlayTrigger } from 'react-bootstrap';
+import { Tooltip } from '../../src/components/Tooltip';
import { InfoTooltipWithTrigger } from '../../src';
describe('InfoTooltipWithTrigger', () => {
it('renders a tooltip', () => {
const wrapper = shallow();
- expect(wrapper.find(OverlayTrigger)).toHaveLength(1);
+ expect(wrapper.find(Tooltip)).toHaveLength(1);
});
it('renders an info icon', () => {