From 45c28c8046c56d4ebe1dfaf0235783fe864ae75f Mon Sep 17 00:00:00 2001
From: Kamil Gabryjelski <kamil.gabryjelski@gmail.com>
Date: Fri, 25 Mar 2022 07:55:11 +0100
Subject: [PATCH] feat(explore): Dataset panel option tooltips (#19259)

* feat(explore): Add description to column/metric tooltips in dataset panel

* Fix tests

* Address code review comments
---
 superset-frontend/package-lock.json           | 125 +++-------
 .../superset-ui-chart-controls/package.json   |  41 ++--
 .../src/components/ColumnOption.tsx           |  20 +-
 .../src/components/MetricOption.tsx           |  19 +-
 .../src/components/Tooltip.tsx                |   8 +
 .../src/components/labelUtils.tsx             |  99 +++++---
 .../test/components/ColumnOption.test.tsx     |   7 +-
 .../test/components/MetricOption.test.tsx     |   9 +-
 .../test/components/labelUtils.test.tsx       | 215 ++++++++++--------
 9 files changed, 264 insertions(+), 279 deletions(-)

diff --git a/superset-frontend/package-lock.json b/superset-frontend/package-lock.json
index fbdb991259..6fb053083f 100644
--- a/superset-frontend/package-lock.json
+++ b/superset-frontend/package-lock.json
@@ -5276,7 +5276,6 @@
       "version": "26.6.2",
       "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
       "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-      "dev": true,
       "dependencies": {
         "@types/istanbul-lib-coverage": "^2.0.0",
         "@types/istanbul-reports": "^3.0.0",
@@ -5292,7 +5291,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.0.tgz",
       "integrity": "sha512-nwKNbvnwJ2/mndE9ItP/zc2TCzw6uuodnF4EHYWD+gCQDVBuRQL5UzbZD0/ezy1iKsFU2ZQiDqg4M9dN4+wZgA==",
-      "dev": true,
       "dependencies": {
         "@types/istanbul-lib-report": "*"
       }
@@ -21613,7 +21611,6 @@
       "version": "7.29.4",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-7.29.4.tgz",
       "integrity": "sha512-CtrJRiSYEfbtNGtEsd78mk1n1v2TUbeABlNIcOCJdDfkN5/JTOwQEbbQpoSRxGqzcWPgStMvJ4mNolSuBRv1NA==",
-      "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.10.4",
         "@babel/runtime": "^7.12.5",
@@ -21632,7 +21629,6 @@
       "version": "5.11.6",
       "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.11.6.tgz",
       "integrity": "sha512-cVZyUNRWwUKI0++yepYpYX7uhrP398I+tGz4zOlLVlUYnZS+Svuxv4fwLeCIy7TnBYKXUaOlQr3vopxL8ZfEnA==",
-      "dev": true,
       "dependencies": {
         "@babel/runtime": "^7.9.2",
         "@types/testing-library__jest-dom": "^5.9.1",
@@ -21653,7 +21649,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
       "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
-      "dev": true,
       "dependencies": {
         "ansi-styles": "^4.1.0",
         "supports-color": "^7.1.0"
@@ -21666,7 +21661,6 @@
       "version": "11.2.0",
       "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-11.2.0.tgz",
       "integrity": "sha512-90xKYJzskZ7q/AoSuWraQL4EGZlr75uZvDt3nrO4M+rugN02zjO45tmOBq/JBOgDiMIL1tkhHioKXjJsVaSINA==",
-      "dev": true,
       "dependencies": {
         "@babel/runtime": "^7.12.5",
         "@testing-library/dom": "^7.27.1"
@@ -21683,7 +21677,6 @@
       "version": "5.0.3",
       "resolved": "https://registry.npmjs.org/@testing-library/react-hooks/-/react-hooks-5.0.3.tgz",
       "integrity": "sha512-UrnnRc5II7LMH14xsYNm/WRch/67cBafmrSQcyFh0v+UUmSf1uzfB7zn5jQXSettGwOSxJwdQUN7PgkT0w22Lg==",
-      "dev": true,
       "dependencies": {
         "@babel/runtime": "^7.12.5",
         "@types/react": ">=16.9.0",
@@ -21710,7 +21703,6 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-3.1.0.tgz",
       "integrity": "sha512-lmPrdi5SLRJR+AeJkqdkGlW/CRkAUvZnETahK58J4xb5wpbfDngasEGu+w0T1iXEhVrYBJZeW+c4V1hILCnMWQ==",
-      "dev": true,
       "dependencies": {
         "@babel/runtime": "^7.12.5"
       },
@@ -21726,7 +21718,6 @@
       "version": "12.7.0",
       "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-12.7.0.tgz",
       "integrity": "sha512-KzRM1KNDoW8pJ2HTenrUhTjV6wJMHvWAagDs8DDrYSWz6y4PN+K2jSvlm2bMHWNRk5LTJPo9jqIjNjJ3FlqXNw==",
-      "dev": true,
       "dependencies": {
         "@babel/runtime": "^7.12.5"
       },
@@ -21759,8 +21750,7 @@
     "node_modules/@types/aria-query": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-4.2.0.tgz",
-      "integrity": "sha512-iIgQNzCm0v7QMhhe4Jjn9uRh+I6GoPmt03CbEtwx3ao8/EfoQcmgtqH4vQ5Db/lxiIGaWDv6nwvunuh0RyX0+A==",
-      "dev": true
+      "integrity": "sha512-iIgQNzCm0v7QMhhe4Jjn9uRh+I6GoPmt03CbEtwx3ao8/EfoQcmgtqH4vQ5Db/lxiIGaWDv6nwvunuh0RyX0+A=="
     },
     "node_modules/@types/babel__core": {
       "version": "7.1.9",
@@ -22052,7 +22042,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz",
       "integrity": "sha512-plGgXAPfVKFoYfa9NpYDAkseG+g6Jr294RqeqcqDixSbU34MZVJRi/P+7Y8GDpzkEwLaGZZOpKIEmeVZNtKsrg==",
-      "dev": true,
       "dependencies": {
         "@types/istanbul-lib-coverage": "*"
       }
@@ -22071,7 +22060,6 @@
       "version": "26.0.23",
       "resolved": "https://registry.npmjs.org/@types/jest/-/jest-26.0.23.tgz",
       "integrity": "sha512-ZHLmWMJ9jJ9PTiT58juykZpL7KjwJywFN3Rr2pTSkyQfydf/rk22yS7W8p5DaVUMQ2BQC7oYiU3FjbTM/mYrOA==",
-      "dev": true,
       "dependencies": {
         "jest-diff": "^26.0.0",
         "pretty-format": "^26.0.0"
@@ -22262,7 +22250,6 @@
       "version": "16.9.8",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.8.tgz",
       "integrity": "sha512-ykkPQ+5nFknnlU6lDd947WbQ6TE3NNzbQAkInC2EKY1qeYdTKp7onFusmYZb+ityzx2YviqT6BXSu+LyWWJwcA==",
-      "dev": true,
       "dependencies": {
         "@types/react": "*"
       }
@@ -22377,7 +22364,6 @@
       "version": "17.0.1",
       "resolved": "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-17.0.1.tgz",
       "integrity": "sha512-3Fi2O6Zzq/f3QR9dRnlnHso9bMl7weKCviFmfF6B4LS1Uat6Hkm15k0ZAQuDz+UBq6B3+g+NM6IT2nr5QgPzCw==",
-      "dev": true,
       "dependencies": {
         "@types/react": "*"
       }
@@ -22517,7 +22503,6 @@
       "version": "5.9.5",
       "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.9.5.tgz",
       "integrity": "sha512-ggn3ws+yRbOHog9GxnXiEZ/35Mow6YtPZpd7Z5mKDeZS/o7zx3yAle0ov/wjhVB5QT4N2Dt+GNoGCdqkBGCajQ==",
-      "dev": true,
       "dependencies": {
         "@types/jest": "*"
       }
@@ -22632,7 +22617,6 @@
       "version": "15.0.13",
       "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.13.tgz",
       "integrity": "sha512-kQ5JNTrbDv3Rp5X2n/iUu37IJBDU2gsZ5R/g1/KHOOEc5IKfUFjXT6DENPGduh08I/pamwtEq4oul7gUqKTQDQ==",
-      "dev": true,
       "dependencies": {
         "@types/yargs-parser": "*"
       }
@@ -22640,8 +22624,7 @@
     "node_modules/@types/yargs-parser": {
       "version": "15.0.0",
       "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-15.0.0.tgz",
-      "integrity": "sha512-FA/BWv8t8ZWJ+gEOnLLd8ygxH/2UFbAvgEonyfN6yWGLKc7zVjbpl2Y4CTjid9h2RfgPP6SEt6uHwEOply00yw==",
-      "dev": true
+      "integrity": "sha512-FA/BWv8t8ZWJ+gEOnLLd8ygxH/2UFbAvgEonyfN6yWGLKc7zVjbpl2Y4CTjid9h2RfgPP6SEt6uHwEOply00yw=="
     },
     "node_modules/@types/yauzl": {
       "version": "2.9.2",
@@ -24536,7 +24519,6 @@
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-4.2.2.tgz",
       "integrity": "sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==",
-      "dev": true,
       "dependencies": {
         "@babel/runtime": "^7.10.2",
         "@babel/runtime-corejs3": "^7.10.2"
@@ -29135,7 +29117,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/css/-/css-3.0.0.tgz",
       "integrity": "sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==",
-      "dev": true,
       "dependencies": {
         "inherits": "^2.0.4",
         "source-map": "^0.6.1",
@@ -30038,20 +30019,17 @@
     "node_modules/css.escape": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
-      "integrity": "sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=",
-      "dev": true
+      "integrity": "sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s="
     },
     "node_modules/css/node_modules/inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
     "node_modules/css/node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -30060,7 +30038,6 @@
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.6.0.tgz",
       "integrity": "sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==",
-      "dev": true,
       "dependencies": {
         "atob": "^2.1.2",
         "decode-uri-component": "^0.2.0"
@@ -31356,7 +31333,6 @@
       "version": "26.6.2",
       "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-26.6.2.tgz",
       "integrity": "sha512-Mv/TDa3nZ9sbc5soK+OoA74BsS3mL37yixCvUAQkiuA4Wz6YtwP/K47n2rv2ovzHZvoiQeA5FTQOschKkEwB0Q==",
-      "dev": true,
       "engines": {
         "node": ">= 10.14.2"
       }
@@ -31457,8 +31433,7 @@
     "node_modules/dom-accessibility-api": {
       "version": "0.5.4",
       "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.4.tgz",
-      "integrity": "sha512-TvrjBckDy2c6v6RLxPv5QXOnU+SmF9nBII5621Ve5fu6Z/BDrENurBEvlC1f44lKEUVqOpK4w9E5Idc5/EgkLQ==",
-      "dev": true
+      "integrity": "sha512-TvrjBckDy2c6v6RLxPv5QXOnU+SmF9nBII5621Ve5fu6Z/BDrENurBEvlC1f44lKEUVqOpK4w9E5Idc5/EgkLQ=="
     },
     "node_modules/dom-align": {
       "version": "1.12.0",
@@ -34472,7 +34447,6 @@
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/filter-console/-/filter-console-0.1.1.tgz",
       "integrity": "sha512-zrXoV1Uaz52DqPs+qEwNJWJFAWZpYJ47UNmpN9q4j+/EYsz85uV0DC9k8tRND5kYmoVzL0W+Y75q4Rg8sRJCdg==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -39190,7 +39164,6 @@
       "version": "26.6.2",
       "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-26.6.2.tgz",
       "integrity": "sha512-6m+9Z3Gv9wN0WFVasqjCL/06+EFCMTqDEUl/b87HYK2rAPTyfz4ZIuSlPhY51PIQRWx5TaxeF1qmXKe9gfN3sA==",
-      "dev": true,
       "dependencies": {
         "chalk": "^4.0.0",
         "diff-sequences": "^26.6.2",
@@ -40169,7 +40142,6 @@
       "version": "26.3.0",
       "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-26.3.0.tgz",
       "integrity": "sha512-TpfaviN1R2pQWkIihlfEanwOXK0zcxrKEE4MlU6Tn7keoXdN6/3gK/xl0yEh8DOunn5pOVGKf8hB4R9gVh04ig==",
-      "dev": true,
       "engines": {
         "node": ">= 10.14.2"
       }
@@ -42868,7 +42840,6 @@
       "version": "1.4.4",
       "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz",
       "integrity": "sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY=",
-      "dev": true,
       "bin": {
         "lz-string": "bin/bin.js"
       }
@@ -46972,7 +46943,6 @@
       "version": "26.6.2",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.2.tgz",
       "integrity": "sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==",
-      "dev": true,
       "dependencies": {
         "@jest/types": "^26.6.2",
         "ansi-regex": "^5.0.0",
@@ -46987,7 +46957,6 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
       "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -46995,8 +46964,7 @@
     "node_modules/pretty-format/node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-      "dev": true
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
     "node_modules/pretty-hrtime": {
       "version": "1.0.3",
@@ -49486,7 +49454,7 @@
       "version": "16.9.0",
       "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.9.0.tgz",
       "integrity": "sha512-R62stB73qZyhrJo7wmCW9jgl/07ai+YzvouvCXIJLBkRlRqLx4j9RqcLEAfNfU3OxTGucqR2Whmn3/Aad6L3hQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "object-assign": "^4.1.1",
         "prop-types": "^15.6.2",
@@ -49501,7 +49469,7 @@
       "version": "16.9.0",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.9.0.tgz",
       "integrity": "sha512-tJBzzzIgnnRfEm046qRcURvwQnZVXmuCbscxUO5RWrGTXpon2d4c8mI0D8WE6ydVIm29JiLB6+RslkIvym9Rjw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/react-textarea-autosize": {
       "version": "8.3.3",
@@ -50043,7 +50011,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
       "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
-      "dev": true,
       "dependencies": {
         "indent-string": "^4.0.0",
         "strip-indent": "^3.0.0"
@@ -51287,7 +51254,7 @@
       "version": "0.15.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.15.0.tgz",
       "integrity": "sha512-xAefmSfN6jqAa7Kuq7LIJY0bwAPG3xlCj0HMEBQk1lxYiDKZscY2xJ5U/61ZTrYbmNQbXa+gc7czPkVo11tnCg==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1"
@@ -58684,6 +58651,11 @@
       "peerDependencies": {
         "@emotion/react": "^11.4.1",
         "@superset-ui/core": "*",
+        "@testing-library/dom": "^7.29.4",
+        "@testing-library/jest-dom": "^5.11.6",
+        "@testing-library/react": "^11.2.0",
+        "@testing-library/react-hooks": "^5.0.3",
+        "@testing-library/user-event": "^12.7.0",
         "@types/enzyme": "^3.10.5",
         "@types/react": "*",
         "antd": "^4.9.4",
@@ -58709,7 +58681,6 @@
         "@types/prop-types": "^15.7.2",
         "@types/rison": "0.0.6",
         "@types/seedrandom": "^2.4.28",
-        "@types/tinycolor2": "^1.4.3",
         "@vx/responsive": "^0.0.199",
         "csstype": "^2.6.4",
         "d3-format": "^1.3.2",
@@ -58741,8 +58712,10 @@
         "@emotion/styled": "^11.3.0",
         "@types/react": "*",
         "@types/react-loadable": "*",
+        "@types/tinycolor2": "*",
         "react": "^16.13.1",
-        "react-loadable": "^5.5.0"
+        "react-loadable": "^5.5.0",
+        "tinycolor2": "*"
       }
     },
     "packages/superset-ui-core/node_modules/@vx/responsive": {
@@ -63807,7 +63780,6 @@
       "version": "26.6.2",
       "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
       "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-      "dev": true,
       "requires": {
         "@types/istanbul-lib-coverage": "^2.0.0",
         "@types/istanbul-reports": "^3.0.0",
@@ -63820,7 +63792,6 @@
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.0.tgz",
           "integrity": "sha512-nwKNbvnwJ2/mndE9ItP/zc2TCzw6uuodnF4EHYWD+gCQDVBuRQL5UzbZD0/ezy1iKsFU2ZQiDqg4M9dN4+wZgA==",
-          "dev": true,
           "requires": {
             "@types/istanbul-lib-report": "*"
           }
@@ -75815,7 +75786,6 @@
         "@types/prop-types": "^15.7.2",
         "@types/rison": "0.0.6",
         "@types/seedrandom": "^2.4.28",
-        "@types/tinycolor2": "^1.4.3",
         "@vx/responsive": "^0.0.199",
         "csstype": "^2.6.4",
         "d3-format": "^1.3.2",
@@ -76931,7 +76901,6 @@
       "version": "7.29.4",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-7.29.4.tgz",
       "integrity": "sha512-CtrJRiSYEfbtNGtEsd78mk1n1v2TUbeABlNIcOCJdDfkN5/JTOwQEbbQpoSRxGqzcWPgStMvJ4mNolSuBRv1NA==",
-      "dev": true,
       "requires": {
         "@babel/code-frame": "^7.10.4",
         "@babel/runtime": "^7.12.5",
@@ -76947,7 +76916,6 @@
       "version": "5.11.6",
       "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.11.6.tgz",
       "integrity": "sha512-cVZyUNRWwUKI0++yepYpYX7uhrP398I+tGz4zOlLVlUYnZS+Svuxv4fwLeCIy7TnBYKXUaOlQr3vopxL8ZfEnA==",
-      "dev": true,
       "requires": {
         "@babel/runtime": "^7.9.2",
         "@types/testing-library__jest-dom": "^5.9.1",
@@ -76963,7 +76931,6 @@
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
           "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
-          "dev": true,
           "requires": {
             "ansi-styles": "^4.1.0",
             "supports-color": "^7.1.0"
@@ -76975,7 +76942,6 @@
       "version": "11.2.0",
       "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-11.2.0.tgz",
       "integrity": "sha512-90xKYJzskZ7q/AoSuWraQL4EGZlr75uZvDt3nrO4M+rugN02zjO45tmOBq/JBOgDiMIL1tkhHioKXjJsVaSINA==",
-      "dev": true,
       "requires": {
         "@babel/runtime": "^7.12.5",
         "@testing-library/dom": "^7.27.1"
@@ -76985,7 +76951,6 @@
       "version": "5.0.3",
       "resolved": "https://registry.npmjs.org/@testing-library/react-hooks/-/react-hooks-5.0.3.tgz",
       "integrity": "sha512-UrnnRc5II7LMH14xsYNm/WRch/67cBafmrSQcyFh0v+UUmSf1uzfB7zn5jQXSettGwOSxJwdQUN7PgkT0w22Lg==",
-      "dev": true,
       "requires": {
         "@babel/runtime": "^7.12.5",
         "@types/react": ">=16.9.0",
@@ -76999,7 +76964,6 @@
           "version": "3.1.0",
           "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-3.1.0.tgz",
           "integrity": "sha512-lmPrdi5SLRJR+AeJkqdkGlW/CRkAUvZnETahK58J4xb5wpbfDngasEGu+w0T1iXEhVrYBJZeW+c4V1hILCnMWQ==",
-          "dev": true,
           "requires": {
             "@babel/runtime": "^7.12.5"
           }
@@ -77010,7 +76974,6 @@
       "version": "12.7.0",
       "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-12.7.0.tgz",
       "integrity": "sha512-KzRM1KNDoW8pJ2HTenrUhTjV6wJMHvWAagDs8DDrYSWz6y4PN+K2jSvlm2bMHWNRk5LTJPo9jqIjNjJ3FlqXNw==",
-      "dev": true,
       "requires": {
         "@babel/runtime": "^7.12.5"
       }
@@ -77030,8 +76993,7 @@
     "@types/aria-query": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-4.2.0.tgz",
-      "integrity": "sha512-iIgQNzCm0v7QMhhe4Jjn9uRh+I6GoPmt03CbEtwx3ao8/EfoQcmgtqH4vQ5Db/lxiIGaWDv6nwvunuh0RyX0+A==",
-      "dev": true
+      "integrity": "sha512-iIgQNzCm0v7QMhhe4Jjn9uRh+I6GoPmt03CbEtwx3ao8/EfoQcmgtqH4vQ5Db/lxiIGaWDv6nwvunuh0RyX0+A=="
     },
     "@types/babel__core": {
       "version": "7.1.9",
@@ -77323,7 +77285,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz",
       "integrity": "sha512-plGgXAPfVKFoYfa9NpYDAkseG+g6Jr294RqeqcqDixSbU34MZVJRi/P+7Y8GDpzkEwLaGZZOpKIEmeVZNtKsrg==",
-      "dev": true,
       "requires": {
         "@types/istanbul-lib-coverage": "*"
       }
@@ -77342,7 +77303,6 @@
       "version": "26.0.23",
       "resolved": "https://registry.npmjs.org/@types/jest/-/jest-26.0.23.tgz",
       "integrity": "sha512-ZHLmWMJ9jJ9PTiT58juykZpL7KjwJywFN3Rr2pTSkyQfydf/rk22yS7W8p5DaVUMQ2BQC7oYiU3FjbTM/mYrOA==",
-      "dev": true,
       "requires": {
         "jest-diff": "^26.0.0",
         "pretty-format": "^26.0.0"
@@ -77532,7 +77492,6 @@
       "version": "16.9.8",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.8.tgz",
       "integrity": "sha512-ykkPQ+5nFknnlU6lDd947WbQ6TE3NNzbQAkInC2EKY1qeYdTKp7onFusmYZb+ityzx2YviqT6BXSu+LyWWJwcA==",
-      "dev": true,
       "requires": {
         "@types/react": "*"
       }
@@ -77647,7 +77606,6 @@
       "version": "17.0.1",
       "resolved": "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-17.0.1.tgz",
       "integrity": "sha512-3Fi2O6Zzq/f3QR9dRnlnHso9bMl7weKCviFmfF6B4LS1Uat6Hkm15k0ZAQuDz+UBq6B3+g+NM6IT2nr5QgPzCw==",
-      "dev": true,
       "requires": {
         "@types/react": "*"
       }
@@ -77789,7 +77747,6 @@
       "version": "5.9.5",
       "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.9.5.tgz",
       "integrity": "sha512-ggn3ws+yRbOHog9GxnXiEZ/35Mow6YtPZpd7Z5mKDeZS/o7zx3yAle0ov/wjhVB5QT4N2Dt+GNoGCdqkBGCajQ==",
-      "dev": true,
       "requires": {
         "@types/jest": "*"
       }
@@ -77895,7 +77852,6 @@
       "version": "15.0.13",
       "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.13.tgz",
       "integrity": "sha512-kQ5JNTrbDv3Rp5X2n/iUu37IJBDU2gsZ5R/g1/KHOOEc5IKfUFjXT6DENPGduh08I/pamwtEq4oul7gUqKTQDQ==",
-      "dev": true,
       "requires": {
         "@types/yargs-parser": "*"
       }
@@ -77903,8 +77859,7 @@
     "@types/yargs-parser": {
       "version": "15.0.0",
       "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-15.0.0.tgz",
-      "integrity": "sha512-FA/BWv8t8ZWJ+gEOnLLd8ygxH/2UFbAvgEonyfN6yWGLKc7zVjbpl2Y4CTjid9h2RfgPP6SEt6uHwEOply00yw==",
-      "dev": true
+      "integrity": "sha512-FA/BWv8t8ZWJ+gEOnLLd8ygxH/2UFbAvgEonyfN6yWGLKc7zVjbpl2Y4CTjid9h2RfgPP6SEt6uHwEOply00yw=="
     },
     "@types/yauzl": {
       "version": "2.9.2",
@@ -79361,7 +79316,6 @@
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-4.2.2.tgz",
       "integrity": "sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==",
-      "dev": true,
       "requires": {
         "@babel/runtime": "^7.10.2",
         "@babel/runtime-corejs3": "^7.10.2"
@@ -82954,7 +82908,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/css/-/css-3.0.0.tgz",
       "integrity": "sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==",
-      "dev": true,
       "requires": {
         "inherits": "^2.0.4",
         "source-map": "^0.6.1",
@@ -82964,20 +82917,17 @@
         "inherits": {
           "version": "2.0.4",
           "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-          "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-          "dev": true
+          "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
         },
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
         },
         "source-map-resolve": {
           "version": "0.6.0",
           "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.6.0.tgz",
           "integrity": "sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==",
-          "dev": true,
           "requires": {
             "atob": "^2.1.2",
             "decode-uri-component": "^0.2.0"
@@ -83590,8 +83540,7 @@
     "css.escape": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
-      "integrity": "sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=",
-      "dev": true
+      "integrity": "sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s="
     },
     "csscolorparser": {
       "version": "1.0.3",
@@ -84635,8 +84584,7 @@
     "diff-sequences": {
       "version": "26.6.2",
       "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-26.6.2.tgz",
-      "integrity": "sha512-Mv/TDa3nZ9sbc5soK+OoA74BsS3mL37yixCvUAQkiuA4Wz6YtwP/K47n2rv2ovzHZvoiQeA5FTQOschKkEwB0Q==",
-      "dev": true
+      "integrity": "sha512-Mv/TDa3nZ9sbc5soK+OoA74BsS3mL37yixCvUAQkiuA4Wz6YtwP/K47n2rv2ovzHZvoiQeA5FTQOschKkEwB0Q=="
     },
     "diffie-hellman": {
       "version": "5.0.3",
@@ -84729,8 +84677,7 @@
     "dom-accessibility-api": {
       "version": "0.5.4",
       "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.4.tgz",
-      "integrity": "sha512-TvrjBckDy2c6v6RLxPv5QXOnU+SmF9nBII5621Ve5fu6Z/BDrENurBEvlC1f44lKEUVqOpK4w9E5Idc5/EgkLQ==",
-      "dev": true
+      "integrity": "sha512-TvrjBckDy2c6v6RLxPv5QXOnU+SmF9nBII5621Ve5fu6Z/BDrENurBEvlC1f44lKEUVqOpK4w9E5Idc5/EgkLQ=="
     },
     "dom-align": {
       "version": "1.12.0",
@@ -87102,8 +87049,7 @@
     "filter-console": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/filter-console/-/filter-console-0.1.1.tgz",
-      "integrity": "sha512-zrXoV1Uaz52DqPs+qEwNJWJFAWZpYJ47UNmpN9q4j+/EYsz85uV0DC9k8tRND5kYmoVzL0W+Y75q4Rg8sRJCdg==",
-      "dev": true
+      "integrity": "sha512-zrXoV1Uaz52DqPs+qEwNJWJFAWZpYJ47UNmpN9q4j+/EYsz85uV0DC9k8tRND5kYmoVzL0W+Y75q4Rg8sRJCdg=="
     },
     "filter-obj": {
       "version": "1.1.0",
@@ -90728,7 +90674,6 @@
       "version": "26.6.2",
       "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-26.6.2.tgz",
       "integrity": "sha512-6m+9Z3Gv9wN0WFVasqjCL/06+EFCMTqDEUl/b87HYK2rAPTyfz4ZIuSlPhY51PIQRWx5TaxeF1qmXKe9gfN3sA==",
-      "dev": true,
       "requires": {
         "chalk": "^4.0.0",
         "diff-sequences": "^26.6.2",
@@ -91515,8 +91460,7 @@
     "jest-get-type": {
       "version": "26.3.0",
       "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-26.3.0.tgz",
-      "integrity": "sha512-TpfaviN1R2pQWkIihlfEanwOXK0zcxrKEE4MlU6Tn7keoXdN6/3gK/xl0yEh8DOunn5pOVGKf8hB4R9gVh04ig==",
-      "dev": true
+      "integrity": "sha512-TpfaviN1R2pQWkIihlfEanwOXK0zcxrKEE4MlU6Tn7keoXdN6/3gK/xl0yEh8DOunn5pOVGKf8hB4R9gVh04ig=="
     },
     "jest-haste-map": {
       "version": "26.6.2",
@@ -93574,8 +93518,7 @@
     "lz-string": {
       "version": "1.4.4",
       "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz",
-      "integrity": "sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY=",
-      "dev": true
+      "integrity": "sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY="
     },
     "magic-string": {
       "version": "0.22.5",
@@ -96802,7 +96745,6 @@
       "version": "26.6.2",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.2.tgz",
       "integrity": "sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==",
-      "dev": true,
       "requires": {
         "@jest/types": "^26.6.2",
         "ansi-regex": "^5.0.0",
@@ -96813,14 +96755,12 @@
         "ansi-regex": {
           "version": "5.0.0",
           "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
-          "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
-          "dev": true
+          "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg=="
         },
         "react-is": {
           "version": "17.0.2",
           "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-          "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-          "dev": true
+          "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
         }
       }
     },
@@ -98791,7 +98731,7 @@
       "version": "16.9.0",
       "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.9.0.tgz",
       "integrity": "sha512-R62stB73qZyhrJo7wmCW9jgl/07ai+YzvouvCXIJLBkRlRqLx4j9RqcLEAfNfU3OxTGucqR2Whmn3/Aad6L3hQ==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "object-assign": "^4.1.1",
         "prop-types": "^15.6.2",
@@ -98803,7 +98743,7 @@
           "version": "16.9.0",
           "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.9.0.tgz",
           "integrity": "sha512-tJBzzzIgnnRfEm046qRcURvwQnZVXmuCbscxUO5RWrGTXpon2d4c8mI0D8WE6ydVIm29JiLB6+RslkIvym9Rjw==",
-          "dev": true
+          "devOptional": true
         }
       }
     },
@@ -99229,7 +99169,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
       "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
-      "dev": true,
       "requires": {
         "indent-string": "^4.0.0",
         "strip-indent": "^3.0.0"
@@ -100178,7 +100117,7 @@
       "version": "0.15.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.15.0.tgz",
       "integrity": "sha512-xAefmSfN6jqAa7Kuq7LIJY0bwAPG3xlCj0HMEBQk1lxYiDKZscY2xJ5U/61ZTrYbmNQbXa+gc7czPkVo11tnCg==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1"
diff --git a/superset-frontend/packages/superset-ui-chart-controls/package.json b/superset-frontend/packages/superset-ui-chart-controls/package.json
index f5481c60a3..f875295ce5 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/package.json
+++ b/superset-frontend/packages/superset-ui-chart-controls/package.json
@@ -2,6 +2,19 @@
   "name": "@superset-ui/chart-controls",
   "version": "0.18.25",
   "description": "Superset UI control-utils",
+  "keywords": [
+    "superset"
+  ],
+  "homepage": "https://github.com/apache-superset/superset-ui#readme",
+  "bugs": {
+    "url": "https://github.com/apache-superset/superset-ui/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/apache-superset/superset-ui.git"
+  },
+  "license": "Apache-2.0",
+  "author": "Superset",
   "sideEffects": false,
   "main": "lib/index.js",
   "module": "esm/index.js",
@@ -9,22 +22,6 @@
     "esm",
     "lib"
   ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/apache-superset/superset-ui.git"
-  },
-  "keywords": [
-    "superset"
-  ],
-  "author": "Superset",
-  "license": "Apache-2.0",
-  "bugs": {
-    "url": "https://github.com/apache-superset/superset-ui/issues"
-  },
-  "homepage": "https://github.com/apache-superset/superset-ui#readme",
-  "publishConfig": {
-    "access": "public"
-  },
   "dependencies": {
     "@react-icons/all-files": "^4.1.0",
     "lodash": "^4.17.15",
@@ -33,10 +30,18 @@
   "peerDependencies": {
     "@emotion/react": "^11.4.1",
     "@superset-ui/core": "*",
+    "@testing-library/dom": "^7.29.4",
+    "@testing-library/jest-dom": "^5.11.6",
+    "@testing-library/react": "^11.2.0",
+    "@testing-library/react-hooks": "^5.0.3",
+    "@testing-library/user-event": "^12.7.0",
+    "@types/enzyme": "^3.10.5",
     "@types/react": "*",
     "antd": "^4.9.4",
     "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "@types/enzyme": "^3.10.5"
+    "react-dom": "^16.13.1"
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }
diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnOption.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnOption.tsx
index 6757219e45..b24ca44591 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnOption.tsx
+++ b/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnOption.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { useEffect, useState, ReactNode } from 'react';
+import React, { useState, ReactNode, useLayoutEffect } from 'react';
 import { styled } from '@superset-ui/core';
 import { Tooltip } from './Tooltip';
 import { ColumnTypeLabel } from './ColumnTypeLabel';
@@ -47,7 +47,7 @@ export function ColumnOption({
   const type = hasExpression ? 'expression' : type_generic;
   const [tooltipText, setTooltipText] = useState<ReactNode>(column.column_name);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     setTooltipText(getColumnTooltipNode(column, labelRef));
   }, [labelRef, column]);
 
@@ -61,26 +61,12 @@ export function ColumnOption({
           details={column.certification_details}
         />
       )}
-      <Tooltip
-        id="metric-name-tooltip"
-        title={tooltipText}
-        trigger={['hover']}
-        placement="top"
-      >
+      <Tooltip id="metric-name-tooltip" title={tooltipText}>
         <span className="m-r-5 option-label column-option-label" ref={labelRef}>
           {getColumnLabelText(column)}
         </span>
       </Tooltip>
 
-      {column.description && (
-        <InfoTooltipWithTrigger
-          className="m-r-5 text-muted"
-          icon="info"
-          tooltip={column.description}
-          label={`descr-${column.column_name}`}
-          placement="top"
-        />
-      )}
       {hasExpression && (
         <InfoTooltipWithTrigger
           className="m-r-5 text-muted"
diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/components/MetricOption.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/components/MetricOption.tsx
index 38b8cb6fc1..0d0754abc1 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/src/components/MetricOption.tsx
+++ b/superset-frontend/packages/superset-ui-chart-controls/src/components/MetricOption.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { useEffect, useState, ReactNode } from 'react';
+import React, { useState, ReactNode, useLayoutEffect } from 'react';
 import { styled, Metric, SafeMarkdown } from '@superset-ui/core';
 import InfoTooltipWithTrigger from './InfoTooltipWithTrigger';
 import { ColumnTypeLabel } from './ColumnTypeLabel';
@@ -63,7 +63,7 @@ export function MetricOption({
 
   const [tooltipText, setTooltipText] = useState<ReactNode>(metric.metric_name);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     setTooltipText(getMetricTooltipNode(metric, labelRef));
   }, [labelRef, metric]);
 
@@ -77,24 +77,11 @@ export function MetricOption({
           details={metric.certification_details}
         />
       )}
-      <Tooltip
-        id="metric-name-tooltip"
-        title={tooltipText}
-        trigger={['hover']}
-        placement="top"
-      >
+      <Tooltip id="metric-name-tooltip" title={tooltipText}>
         <span className="option-label metric-option-label" ref={labelRef}>
           {link}
         </span>
       </Tooltip>
-      {metric.description && (
-        <InfoTooltipWithTrigger
-          className="text-muted"
-          icon="info"
-          tooltip={metric.description}
-          label={`descr-${metric.metric_name}`}
-        />
-      )}
       {showFormula && (
         <InfoTooltipWithTrigger
           className="text-muted"
diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/components/Tooltip.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/components/Tooltip.tsx
index c49931427f..098fb169b6 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/src/components/Tooltip.tsx
+++ b/superset-frontend/packages/superset-ui-chart-controls/src/components/Tooltip.tsx
@@ -46,9 +46,17 @@ export const Tooltip = ({ overlayStyle, color, ...props }: TooltipProps) => {
         overlayStyle={{
           fontSize: theme.typography.sizes.s,
           lineHeight: '1.6',
+          maxWidth: theme.gridUnit * 62,
+          minWidth: theme.gridUnit * 30,
           ...overlayStyle,
         }}
+        // make the tooltip display closer to the label
+        align={{ offset: [0, 1] }}
         color={defaultColor || color}
+        trigger="hover"
+        placement="bottom"
+        // don't allow hovering over the tooltip
+        mouseLeaveDelay={0}
         {...props}
       />
     </>
diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/components/labelUtils.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/components/labelUtils.tsx
index ee738e1195..c132b0918d 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/src/components/labelUtils.tsx
+++ b/superset-frontend/packages/superset-ui-chart-controls/src/components/labelUtils.tsx
@@ -18,9 +18,41 @@
  */
 import React, { ReactNode } from 'react';
 
-import { t } from '@superset-ui/core';
+import { css, styled, t } from '@superset-ui/core';
 import { ColumnMeta, Metric } from '@superset-ui/chart-controls';
 
+const TooltipSectionWrapper = styled.div`
+  ${({ theme }) => css`
+    display: flex;
+    flex-direction: column;
+    font-size: ${theme.typography.sizes.s}px;
+    line-height: 1.2;
+
+    &:not(:last-of-type) {
+      margin-bottom: ${theme.gridUnit * 2}px;
+    }
+  `}
+`;
+
+const TooltipSectionLabel = styled.span`
+  ${({ theme }) => css`
+    font-weight: ${theme.typography.weights.bold};
+  `}
+`;
+
+const TooltipSection = ({
+  label,
+  text,
+}: {
+  label: ReactNode;
+  text: ReactNode;
+}) => (
+  <TooltipSectionWrapper>
+    <TooltipSectionLabel>{label}</TooltipSectionLabel>
+    <span>{text}</span>
+  </TooltipSectionWrapper>
+);
+
 export const isLabelTruncated = (labelRef?: React.RefObject<any>): boolean =>
   !!(
     labelRef &&
@@ -35,22 +67,25 @@ export const getColumnTooltipNode = (
   column: ColumnMeta,
   labelRef?: React.RefObject<any>,
 ): ReactNode => {
-  // don't show tooltip if it hasn't verbose_name and hasn't truncated
-  if (!column.verbose_name && !isLabelTruncated(labelRef)) {
+  if (
+    !column.verbose_name &&
+    !column.description &&
+    !isLabelTruncated(labelRef)
+  ) {
     return null;
   }
 
-  if (column.verbose_name) {
-    return (
-      <>
-        <div>{t('column name: %s', column.column_name)}</div>
-        <div>{t('verbose name: %s', column.verbose_name)}</div>
-      </>
-    );
-  }
-
-  // show column name in tooltip when column truncated
-  return t('column name: %s', column.column_name);
+  return (
+    <>
+      <TooltipSection label={t('Column name')} text={column.column_name} />
+      {column.verbose_name && (
+        <TooltipSection label={t('Label')} text={column.verbose_name} />
+      )}
+      {column.description && (
+        <TooltipSection label={t('Description')} text={column.description} />
+      )}
+    </>
+  );
 };
 
 type MetricType = Omit<Metric, 'id'> & { label?: string };
@@ -59,23 +94,27 @@ export const getMetricTooltipNode = (
   metric: MetricType,
   labelRef?: React.RefObject<any>,
 ): ReactNode => {
-  // don't show tooltip if it hasn't verbose_name, label and hasn't truncated
-  if (!metric.verbose_name && !metric.label && !isLabelTruncated(labelRef)) {
+  if (
+    !metric.verbose_name &&
+    !metric.description &&
+    !metric.label &&
+    !isLabelTruncated(labelRef)
+  ) {
     return null;
   }
 
-  if (metric.verbose_name) {
-    return (
-      <>
-        <div>{t('metric name: %s', metric.metric_name)}</div>
-        <div>{t('verbose name: %s', metric.verbose_name)}</div>
-      </>
-    );
-  }
-
-  if (isLabelTruncated(labelRef) && metric.label) {
-    return t('label name: %s', metric.label);
-  }
-
-  return t('metric name: %s', metric.metric_name);
+  return (
+    <>
+      <TooltipSection label={t('Metric name')} text={metric.metric_name} />
+      {(metric.label || metric.verbose_name) && (
+        <TooltipSection
+          label={t('Label')}
+          text={metric.label || metric.verbose_name}
+        />
+      )}
+      {metric.description && (
+        <TooltipSection label={t('Description')} text={metric.description} />
+      )}
+    </>
+  );
 };
diff --git a/superset-frontend/packages/superset-ui-chart-controls/test/components/ColumnOption.test.tsx b/superset-frontend/packages/superset-ui-chart-controls/test/components/ColumnOption.test.tsx
index cce693473c..cc0106e9d6 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/test/components/ColumnOption.test.tsx
+++ b/superset-frontend/packages/superset-ui-chart-controls/test/components/ColumnOption.test.tsx
@@ -53,12 +53,7 @@ describe('ColumnOption', () => {
     expect(lbl).toHaveLength(1);
     expect(lbl.first().text()).toBe('Foo');
   });
-  it('shows 2 InfoTooltipWithTrigger', () => {
-    expect(wrapper.find(InfoTooltipWithTrigger)).toHaveLength(2);
-  });
-  it('shows only 1 InfoTooltipWithTrigger when no descr', () => {
-    delete props.column.description;
-    wrapper = shallow(factory(props));
+  it('shows 1 InfoTooltipWithTrigger', () => {
     expect(wrapper.find(InfoTooltipWithTrigger)).toHaveLength(1);
   });
   it('shows a label with column_name when no verbose_name', () => {
diff --git a/superset-frontend/packages/superset-ui-chart-controls/test/components/MetricOption.test.tsx b/superset-frontend/packages/superset-ui-chart-controls/test/components/MetricOption.test.tsx
index 737e2f3352..e71882bd3e 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/test/components/MetricOption.test.tsx
+++ b/superset-frontend/packages/superset-ui-chart-controls/test/components/MetricOption.test.tsx
@@ -51,12 +51,7 @@ describe('MetricOption', () => {
     expect(lbl).toHaveLength(1);
     expect(lbl.first().text()).toBe('Foo');
   });
-  it('shows 3 InfoTooltipWithTrigger', () => {
-    expect(wrapper.find('InfoTooltipWithTrigger')).toHaveLength(3);
-  });
-  it('shows only 2 InfoTooltipWithTrigger when no descr', () => {
-    props.metric.description = '';
-    wrapper = shallow(factory(props));
+  it('shows 2 InfoTooltipWithTrigger', () => {
     expect(wrapper.find('InfoTooltipWithTrigger')).toHaveLength(2);
   });
   it('shows a label with metric_name when no verbose_name', () => {
@@ -64,7 +59,7 @@ describe('MetricOption', () => {
     wrapper = shallow(factory(props));
     expect(wrapper.find('.option-label').first().text()).toBe('foo');
   });
-  it('shows only 1 InfoTooltipWithTrigger when no descr and no warning', () => {
+  it('shows only 1 InfoTooltipWithTrigger when no warning', () => {
     props.metric.warning_text = '';
     wrapper = shallow(factory(props));
     expect(wrapper.find('InfoTooltipWithTrigger')).toHaveLength(1);
diff --git a/superset-frontend/packages/superset-ui-chart-controls/test/components/labelUtils.test.tsx b/superset-frontend/packages/superset-ui-chart-controls/test/components/labelUtils.test.tsx
index b5e5cd6adf..6d3c89c146 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/test/components/labelUtils.test.tsx
+++ b/superset-frontend/packages/superset-ui-chart-controls/test/components/labelUtils.test.tsx
@@ -16,14 +16,19 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React from 'react';
-
+import React, { ReactElement } from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { ThemeProvider, supersetTheme } from '@superset-ui/core';
 import {
   getColumnLabelText,
   getColumnTooltipNode,
   getMetricTooltipNode,
 } from '../../src/components/labelUtils';
 
+const renderWithTheme = (ui: ReactElement) =>
+  render(<ThemeProvider theme={supersetTheme}>{ui}</ThemeProvider>);
+
 test("should get column name when column doesn't have verbose_name", () => {
   expect(
     getColumnLabelText({
@@ -52,66 +57,80 @@ test('should get null as tooltip', () => {
         id: 123,
         column_name: 'column name',
         verbose_name: '',
+        description: '',
       },
       ref,
     ),
   ).toBe(null);
 });
 
-test('should get column name and verbose name when it has a verbose name', () => {
-  const rvNode = (
+test('should get column name, verbose name and description when it has a verbose name', () => {
+  const ref = { current: { scrollWidth: 100, clientWidth: 100 } };
+  renderWithTheme(
     <>
-      <div>column name: column name</div>
-      <div>verbose name: verbose name</div>
-    </>
+      {getColumnTooltipNode(
+        {
+          id: 123,
+          column_name: 'column name',
+          verbose_name: 'verbose name',
+          description: 'A very important column',
+        },
+        ref,
+      )}
+    </>,
   );
 
-  const ref = { current: { scrollWidth: 100, clientWidth: 100 } };
-  expect(
-    getColumnTooltipNode(
-      {
-        id: 123,
-        column_name: 'column name',
-        verbose_name: 'verbose name',
-      },
-      ref,
-    ),
-  ).toStrictEqual(rvNode);
+  expect(screen.getByText('Column name')).toBeVisible();
+  expect(screen.getByText('column name')).toBeVisible();
+  expect(screen.getByText('Label')).toBeVisible();
+  expect(screen.getByText('verbose name')).toBeVisible();
+  expect(screen.getByText('Description')).toBeVisible();
+  expect(screen.getByText('A very important column')).toBeVisible();
 });
 
 test('should get column name as tooltip if it overflowed', () => {
   const ref = { current: { scrollWidth: 200, clientWidth: 100 } };
-  expect(
-    getColumnTooltipNode(
-      {
-        id: 123,
-        column_name: 'long long long long column name',
-        verbose_name: '',
-      },
-      ref,
-    ),
-  ).toBe('column name: long long long long column name');
+  renderWithTheme(
+    <>
+      {getColumnTooltipNode(
+        {
+          id: 123,
+          column_name: 'long long long long column name',
+          verbose_name: '',
+          description: '',
+        },
+        ref,
+      )}
+    </>,
+  );
+  expect(screen.getByText('Column name')).toBeVisible();
+  expect(screen.getByText('long long long long column name')).toBeVisible();
+  expect(screen.queryByText('Label')).not.toBeInTheDocument();
+  expect(screen.queryByText('Description')).not.toBeInTheDocument();
 });
 
-test('should get column name and verbose name as tooltip if it overflowed', () => {
-  const rvNode = (
+test('should get column name, verbose name and description as tooltip if it overflowed', () => {
+  const ref = { current: { scrollWidth: 200, clientWidth: 100 } };
+  renderWithTheme(
     <>
-      <div>column name: long long long long column name</div>
-      <div>verbose name: long long long long verbose name</div>
-    </>
+      {getColumnTooltipNode(
+        {
+          id: 123,
+          column_name: 'long long long long column name',
+          verbose_name: 'long long long long verbose name',
+          description: 'A very important column',
+        },
+        ref,
+      )}
+    </>,
   );
 
-  const ref = { current: { scrollWidth: 200, clientWidth: 100 } };
-  expect(
-    getColumnTooltipNode(
-      {
-        id: 123,
-        column_name: 'long long long long column name',
-        verbose_name: 'long long long long verbose name',
-      },
-      ref,
-    ),
-  ).toStrictEqual(rvNode);
+  expect(screen.getByText('Column name')).toBeVisible();
+  expect(screen.getByText('long long long long column name')).toBeVisible();
+  expect(screen.getByText('Label')).toBeVisible();
+  expect(screen.getByText('long long long long verbose name')).toBeVisible();
+  expect(screen.getByText('Description')).toBeVisible();
+  expect(screen.getByText('A very important column')).toBeVisible();
 });
 
 test('should get null as tooltip in metric', () => {
@@ -122,64 +141,76 @@ test('should get null as tooltip in metric', () => {
         metric_name: 'count',
         label: '',
         verbose_name: '',
+        description: '',
       },
       ref,
     ),
   ).toBe(null);
 });
 
-test('should get metric name and verbose name as tooltip in metric', () => {
-  const rvNode = (
-    <>
-      <div>metric name: count</div>
-      <div>verbose name: count(*)</div>
-    </>
-  );
-
+test('should get metric name, verbose name and description as tooltip in metric', () => {
   const ref = { current: { scrollWidth: 100, clientWidth: 100 } };
-  expect(
-    getMetricTooltipNode(
-      {
-        metric_name: 'count',
-        label: 'count(*)',
-        verbose_name: 'count(*)',
-      },
-      ref,
-    ),
-  ).toStrictEqual(rvNode);
-});
-
-test('should get metric name and verbose name in tooltip if it overflowed', () => {
-  const rvNode = (
+  renderWithTheme(
     <>
-      <div>metric name: count</div>
-      <div>verbose name: longlonglonglonglong verbose metric</div>
-    </>
+      {getMetricTooltipNode(
+        {
+          metric_name: 'count',
+          label: 'count(*)',
+          verbose_name: 'count(*)',
+          description: 'Count metric',
+        },
+        ref,
+      )}
+    </>,
   );
-
-  const ref = { current: { scrollWidth: 200, clientWidth: 100 } };
-  expect(
-    getMetricTooltipNode(
-      {
-        metric_name: 'count',
-        label: '',
-        verbose_name: 'longlonglonglonglong verbose metric',
-      },
-      ref,
-    ),
-  ).toStrictEqual(rvNode);
+  expect(screen.getByText('Metric name')).toBeVisible();
+  expect(screen.getByText('count')).toBeVisible();
+  expect(screen.getByText('Label')).toBeVisible();
+  expect(screen.getByText('count(*)')).toBeVisible();
+  expect(screen.getByText('Description')).toBeVisible();
+  expect(screen.getByText('Count metric')).toBeVisible();
 });
 
-test('should get label name as tooltip in metric if it overflowed', () => {
+test('should get metric name as tooltip if it overflowed', () => {
   const ref = { current: { scrollWidth: 200, clientWidth: 100 } };
-  expect(
-    getMetricTooltipNode(
-      {
-        metric_name: 'count',
-        label: 'longlonglonglonglong metric label',
-        verbose_name: '',
-      },
-      ref,
-    ),
-  ).toBe('label name: longlonglonglonglong metric label');
+  renderWithTheme(
+    <>
+      {getMetricTooltipNode(
+        {
+          metric_name: 'long long long long metric name',
+          label: '',
+          verbose_name: '',
+          description: '',
+        },
+        ref,
+      )}
+    </>,
+  );
+  expect(screen.getByText('Metric name')).toBeVisible();
+  expect(screen.getByText('long long long long metric name')).toBeVisible();
+  expect(screen.queryByText('Label')).not.toBeInTheDocument();
+  expect(screen.queryByText('Description')).not.toBeInTheDocument();
+});
+
+test('should get metric name, verbose name and description in tooltip if it overflowed', () => {
+  const ref = { current: { scrollWidth: 200, clientWidth: 100 } };
+  renderWithTheme(
+    <>
+      {getMetricTooltipNode(
+        {
+          metric_name: 'count',
+          label: '',
+          verbose_name: 'longlonglonglonglong verbose metric',
+          description: 'Count metric',
+        },
+        ref,
+      )}
+    </>,
+  );
+  expect(screen.getByText('Metric name')).toBeVisible();
+  expect(screen.getByText('count')).toBeVisible();
+  expect(screen.getByText('Label')).toBeVisible();
+  expect(screen.getByText('longlonglonglonglong verbose metric')).toBeVisible();
+  expect(screen.getByText('Description')).toBeVisible();
+  expect(screen.getByText('Count metric')).toBeVisible();
 });