1 files changed, 9 insertions, 10 deletions
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/TemplateFacet.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/TemplateFacet.tsx
index b19ab90b437..4d8f83f312b 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/TemplateFacet.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/TemplateFacet.tsx
@@ -17,6 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import { HelperHintIcon } from 'design-system';
 import * as React from 'react';
 import HelpTooltip from '../../../components/controls/HelpTooltip';
 import { translate } from '../../../helpers/l10n';
@@ -56,16 +57,14 @@ export default class TemplateFacet extends React.PureComponent<Props> {
         renderTextName={this.renderName}
         singleSelection
         values={value !== undefined ? [String(value)] : []}
-      >
-        <HelpTooltip
-          className="spacer-left"
-          overlay={
-            <div className="big-padded-top big-padded-bottom">
-              {translate('coding_rules.rule_template.help')}
-            </div>
-          }
-        />
-      </Facet>
+        help={
+          <HelpTooltip
+            overlay={<div className="sw-my-2">{translate('coding_rules.rule_template.help')}</div>}
+          >
+            <HelperHintIcon />
+          </HelpTooltip>
+        }
+      />
     );
   }
 }