SONAR-10611 Display inline documentation tooltips (#180)

19 files changed, 151 insertions, 73 deletions

diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/Facet.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/Facet.tsx
index dd0a053202e..7e844278970 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/Facet.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/Facet.tsx
@@ -21,6 +21,7 @@ import * as React from 'react';
 import { orderBy, without, sortBy } from 'lodash';
 import * as classNames from 'classnames';
 import { FacetKey } from '../query';
+import Tooltip from '../../../components/controls/Tooltip';
 import FacetBox from '../../../components/facet/FacetBox';
 import FacetHeader from '../../../components/facet/FacetHeader';
 import FacetItem from '../../../components/facet/FacetItem';
@@ -37,6 +38,7 @@ export interface BasicProps {
 }
 
 interface Props extends BasicProps {
+  children?: React.ReactNode;
   disabled?: boolean;
   disabledHelper?: string;
   halfWidth?: boolean;
@@ -101,13 +103,17 @@ export default class Facet extends React.PureComponent<Props> {
         className={classNames({ 'search-navigator-facet-box-forbidden': this.props.disabled })}
         property={this.props.property}>
         <FacetHeader
-          helper={this.props.disabled ? this.props.disabledHelper : undefined}
-          name={translate('coding_rules.facet', this.props.property)}
+          name={
+            <Tooltip overlay={this.props.disabled ? this.props.disabledHelper : undefined}>
+              <span>{translate('coding_rules.facet', this.props.property)}</span>
+            </Tooltip>
+          }
           onClear={this.handleClear}
           onClick={this.props.disabled ? undefined : this.handleHeaderClick}
           open={this.props.open && !this.props.disabled}
-          values={values}
-        />
+          values={values}>
+          {this.props.children}
+        </FacetHeader>
 
         {this.props.open &&
           items !== undefined && <FacetItemsList>{items.map(this.renderItem)}</FacetItemsList>}
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/ProfileFacet.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/ProfileFacet.tsx
index 402b971dcaa..68b6f9ae1ca 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/ProfileFacet.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/ProfileFacet.tsx
@@ -22,6 +22,7 @@ import { sortBy } from 'lodash';
 import * as classNames from 'classnames';
 import { Query, FacetKey } from '../query';
 import { Profile } from '../../../api/quality-profiles';
+import DocTooltip from '../../../components/docs/DocTooltip';
 import FacetBox from '../../../components/facet/FacetBox';
 import FacetHeader from '../../../components/facet/FacetHeader';
 import FacetItem from '../../../components/facet/FacetItem';
@@ -161,8 +162,9 @@ export default class ProfileFacet extends React.PureComponent<Props> {
           onClear={this.handleClear}
           onClick={this.handleHeaderClick}
           open={this.props.open}
-          values={this.getTextValue()}
-        />
+          values={this.getTextValue()}>
+          <DocTooltip className="spacer-left" doc="rules/rules-quality-profiles" />
+        </FacetHeader>
 
         {this.props.open && <FacetItemsList>{profiles.map(this.renderItem)}</FacetItemsList>}
       </FacetBox>
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetails.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetails.tsx
index e951e3b9d44..21481a1f240 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetails.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetails.tsx
@@ -31,6 +31,7 @@ import { getRuleDetails, deleteRule, updateRule } from '../../../api/rules';
 import { RuleActivation, RuleDetails as IRuleDetails } from '../../../app/types';
 import DeferredSpinner from '../../../components/common/DeferredSpinner';
 import ConfirmButton from '../../../components/controls/ConfirmButton';
+import DocTooltip from '../../../components/docs/DocTooltip';
 import { Button } from '../../../components/ui/buttons';
 import { translate, translateWithParameters } from '../../../helpers/l10n';
 
@@ -175,7 +176,7 @@ export default class RuleDetails extends React.PureComponent<Props, State> {
           {params.length > 0 && <RuleDetailsParameters params={params} />}
 
           {isEditable && (
-            <div className="coding-rules-detail-description">
+            <div className="coding-rules-detail-description display-flex-center">
               {/* `templateRule` is used to get rule meta data, `customRule` is used to get parameter values */}
               {/* it's expected to pass the same rule to both parameters */}
               <CustomRuleButton
@@ -202,12 +203,15 @@ export default class RuleDetails extends React.PureComponent<Props, State> {
                 modalHeader={translate('coding_rules.delete_rule')}
                 onConfirm={this.handleDelete}>
                 {({ onClick }) => (
-                  <Button
-                    className="button-red spacer-left js-delete"
-                    id="coding-rules-detail-rule-delete"
-                    onClick={onClick}>
-                    {translate('delete')}
-                  </Button>
+                  <>
+                    <Button
+                      className="button-red spacer-left js-delete"
+                      id="coding-rules-detail-rule-delete"
+                      onClick={onClick}>
+                      {translate('delete')}
+                    </Button>
+                    <DocTooltip className="spacer-left" doc="rules/custom-rule-removal" />
+                  </>
                 )}
               </ConfirmButton>
             </div>
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsMeta.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsMeta.tsx
index 5d5bc25cdae..16e9f0d6f65 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsMeta.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsMeta.tsx
@@ -27,6 +27,7 @@ import { getRuleUrl } from '../../../helpers/urls';
 import LinkIcon from '../../../components/icons-components/LinkIcon';
 import RuleScopeIcon from '../../../components/icons-components/RuleScopeIcon';
 import Tooltip from '../../../components/controls/Tooltip';
+import DocTooltip from '../../../components/docs/DocTooltip';
 import { translate } from '../../../helpers/l10n';
 import IssueTypeIcon from '../../../components/ui/IssueTypeIcon';
 import SeverityHelper from '../../../components/shared/SeverityHelper';
@@ -174,16 +175,15 @@ export default class RuleDetailsMeta extends React.PureComponent<Props, State> {
       return null;
     }
     return (
-      <Tooltip overlay={translate('coding_rules.custom_rule.title')}>
-        <li className="coding-rules-detail-property">
-          {translate('coding_rules.custom_rule')}
-          {' ('}
-          <Link to={getRuleUrl(ruleDetails.templateKey, this.props.organization)}>
-            {translate('coding_rules.show_template')}
-          </Link>
-          {')'}
-        </li>
-      </Tooltip>
+      <li className="coding-rules-detail-property">
+        {translate('coding_rules.custom_rule')}
+        {' ('}
+        <Link to={getRuleUrl(ruleDetails.templateKey, this.props.organization)}>
+          {translate('coding_rules.show_template')}
+        </Link>
+        {')'}
+        <DocTooltip className="little-spacer-left" doc="rules/custom-rules" />
+      </li>
     );
   };
 
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 4a5c87d4774..1f9c3f803ab 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
@@ -20,6 +20,7 @@
 import * as React from 'react';
 import Facet, { BasicProps } from './Facet';
 import { Omit } from '../../../app/types';
+import DocTooltip from '../../../components/docs/DocTooltip';
 import { translate } from '../../../helpers/l10n';
 
 interface Props extends Omit<BasicProps, 'onChange' | 'values'> {
@@ -55,8 +56,9 @@ export default class TemplateFacet extends React.PureComponent<Props> {
         renderName={this.renderName}
         renderTextName={this.renderName}
         singleSelection={true}
-        values={value !== undefined ? [String(value)] : []}
-      />
+        values={value !== undefined ? [String(value)] : []}>
+        <DocTooltip className="spacer-left" doc="rules/rule-templates" />
+      </Facet>
     );
   }
 }
diff --git a/server/sonar-web/src/main/js/apps/overview/qualityGate/QualityGate.js b/server/sonar-web/src/main/js/apps/overview/qualityGate/QualityGate.js
index 20ab7885146..8c647e71b56 100644
--- a/server/sonar-web/src/main/js/apps/overview/qualityGate/QualityGate.js
+++ b/server/sonar-web/src/main/js/apps/overview/qualityGate/QualityGate.js
@@ -25,6 +25,7 @@ import * as theme from '../../../app/theme';
 import { translate } from '../../../helpers/l10n';
 import Level from '../../../components/ui/Level';
 import Tooltip from '../../../components/controls/Tooltip';
+import DocTooltip from '../../../components/docs/DocTooltip';
 import HelpIcon from '../../../components/icons-components/HelpIcon';
 /*:: import type { Component, MeasuresList } from '../types'; */
 
@@ -64,10 +65,11 @@ export default function QualityGate({ branchLike, component, measures } /*: Prop
 
   return (
     <div className="overview-quality-gate" id="overview-quality-gate">
-      <h2 className="overview-title">
-        {translate('overview.quality_gate')}
-        <Level level={level} />
-      </h2>
+      <div className="display-flex-center">
+        <h2 className="overview-title">{translate('overview.quality_gate')}</h2>
+        <DocTooltip className="spacer-left" doc="quality-gates/project-homepage-quality-gate" />
+        <Level className="big-spacer-left" level={level} />
+      </div>
 
       {ignoredConditions && (
         <div className="alert alert-info display-inline-block big-spacer-top">
diff --git a/server/sonar-web/src/main/js/apps/overview/qualityGate/__tests__/__snapshots__/QualityGate-test.js.snap b/server/sonar-web/src/main/js/apps/overview/qualityGate/__tests__/__snapshots__/QualityGate-test.js.snap
index 2b9f86b6062..2387806ada6 100644
--- a/server/sonar-web/src/main/js/apps/overview/qualityGate/__tests__/__snapshots__/QualityGate-test.js.snap
+++ b/server/sonar-web/src/main/js/apps/overview/qualityGate/__tests__/__snapshots__/QualityGate-test.js.snap
@@ -5,14 +5,23 @@ exports[`renders message about ignored conditions 1`] = `
   className="overview-quality-gate"
   id="overview-quality-gate"
 >
-  <h2
-    className="overview-title"
+  <div
+    className="display-flex-center"
   >
-    overview.quality_gate
+    <h2
+      className="overview-title"
+    >
+      overview.quality_gate
+    </h2>
+    <DocTooltip
+      className="spacer-left"
+      doc="quality-gates/project-homepage-quality-gate"
+    />
     <Level
+      className="big-spacer-left"
       level="OK"
     />
-  </h2>
+  </div>
   <div
     className="alert alert-info display-inline-block big-spacer-top"
   >
diff --git a/server/sonar-web/src/main/js/apps/overview/styles.css b/server/sonar-web/src/main/js/apps/overview/styles.css
index ac492720ff5..0d0dc6dbee9 100644
--- a/server/sonar-web/src/main/js/apps/overview/styles.css
+++ b/server/sonar-web/src/main/js/apps/overview/styles.css
@@ -45,11 +45,6 @@
   font-weight: 400;
 }
 
-.overview-title > .level {
-  vertical-align: top;
-  margin-left: 15px;
-}
-
 /*
  * Quality Gate
  */
diff --git a/server/sonar-web/src/main/js/apps/projectQualityGate/Header.tsx b/server/sonar-web/src/main/js/apps/projectQualityGate/Header.tsx
index 5adc7becf55..de42184f96d 100644
--- a/server/sonar-web/src/main/js/apps/projectQualityGate/Header.tsx
+++ b/server/sonar-web/src/main/js/apps/projectQualityGate/Header.tsx
@@ -18,12 +18,16 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import DocTooltip from '../../components/docs/DocTooltip';
 import { translate } from '../../helpers/l10n';
 
 export default function Header() {
   return (
     <header className="page-header">
-      <h1 className="page-title">{translate('project_quality_gate.page')}</h1>
+      <div className="page-title display-flex-center">
+        <h1>{translate('project_quality_gate.page')}</h1>
+        <DocTooltip className="spacer-left" doc="quality-gates/quality-gate-projects" />
+      </div>
       <div className="page-description">{translate('project_quality_gate.page.description')}</div>
     </header>
   );
diff --git a/server/sonar-web/src/main/js/apps/projectQualityGate/__tests__/__snapshots__/Header-test.tsx.snap b/server/sonar-web/src/main/js/apps/projectQualityGate/__tests__/__snapshots__/Header-test.tsx.snap
index eaade8b5468..ccf8e090d57 100644
--- a/server/sonar-web/src/main/js/apps/projectQualityGate/__tests__/__snapshots__/Header-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projectQualityGate/__tests__/__snapshots__/Header-test.tsx.snap
@@ -4,11 +4,17 @@ exports[`renders 1`] = `
 <header
   className="page-header"
 >
-  <h1
-    className="page-title"
+  <div
+    className="page-title display-flex-center"
   >
-    project_quality_gate.page
-  </h1>
+    <h1>
+      project_quality_gate.page
+    </h1>
+    <DocTooltip
+      className="spacer-left"
+      doc="quality-gates/quality-gate-projects"
+    />
+  </div>
   <div
     className="page-description"
   >
diff --git a/server/sonar-web/src/main/js/apps/projectQualityProfiles/Header.tsx b/server/sonar-web/src/main/js/apps/projectQualityProfiles/Header.tsx
index b1347b6ff2e..cf31adcb621 100644
--- a/server/sonar-web/src/main/js/apps/projectQualityProfiles/Header.tsx
+++ b/server/sonar-web/src/main/js/apps/projectQualityProfiles/Header.tsx
@@ -18,12 +18,16 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import DocTooltip from '../../components/docs/DocTooltip';
 import { translate } from '../../helpers/l10n';
 
 export default function Header() {
   return (
     <header className="page-header">
-      <h1 className="page-title">{translate('project_quality_profiles.page')}</h1>
+      <div className="page-title display-flex-center">
+        <h1>{translate('project_quality_profiles.page')}</h1>
+        <DocTooltip className="spacer-left" doc="quality-profiles/quality-profile-projects" />
+      </div>
       <div className="page-description">
         {translate('project_quality_profiles.page.description')}
       </div>
diff --git a/server/sonar-web/src/main/js/apps/projectQualityProfiles/__tests__/__snapshots__/Header-test.tsx.snap b/server/sonar-web/src/main/js/apps/projectQualityProfiles/__tests__/__snapshots__/Header-test.tsx.snap
index 4f0e35f4a2f..03ed0f32b01 100644
--- a/server/sonar-web/src/main/js/apps/projectQualityProfiles/__tests__/__snapshots__/Header-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projectQualityProfiles/__tests__/__snapshots__/Header-test.tsx.snap
@@ -4,11 +4,17 @@ exports[`renders 1`] = `
 <header
   className="page-header"
 >
-  <h1
-    className="page-title"
+  <div
+    className="page-title display-flex-center"
   >
-    project_quality_profiles.page
-  </h1>
+    <h1>
+      project_quality_profiles.page
+    </h1>
+    <DocTooltip
+      className="spacer-left"
+      doc="quality-profiles/quality-profile-projects"
+    />
+  </div>
   <div
     className="page-description"
   >
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/Conditions.js b/server/sonar-web/src/main/js/apps/quality-gates/components/Conditions.js
index f3fb35559e7..982d6d9f2ab 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/Conditions.js
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/Conditions.js
@@ -21,6 +21,7 @@ import React from 'react';
 import { sortBy, uniqBy } from 'lodash';
 import AddConditionForm from './AddConditionForm';
 import Condition from './Condition';
+import DocTooltip from '../../../components/docs/DocTooltip';
 import { translate, getLocalizedMetricName } from '../../../helpers/l10n';
 
 function getKey(condition, index) {
@@ -89,7 +90,10 @@ export default class Conditions extends React.PureComponent {
     }));
     return (
       <div className="quality-gate-section" id="quality-gate-conditions">
-        <h3 className="spacer-bottom">{translate('quality_gates.conditions')}</h3>
+        <header className="display-flex-center spacer-bottom">
+          <h3>{translate('quality_gates.conditions')}</h3>
+          <DocTooltip className="spacer-left" doc="quality-gates/quality-gate-conditions" />
+        </header>
 
         <div className="big-spacer-bottom">{translate('quality_gates.introduction')}</div>
 
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/DetailsContent.js b/server/sonar-web/src/main/js/apps/quality-gates/components/DetailsContent.js
index ebe73fe1e8a..35b37f12bae 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/DetailsContent.js
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/DetailsContent.js
@@ -20,6 +20,7 @@
 import React from 'react';
 import Conditions from './Conditions';
 import Projects from './Projects';
+import DocTooltip from '../../../components/docs/DocTooltip';
 import { translate } from '../../../helpers/l10n';
 
 export default class DetailsContent extends React.PureComponent {
@@ -47,7 +48,10 @@ export default class DetailsContent extends React.PureComponent {
         />
 
         <div id="quality-gate-projects" className="quality-gate-section">
-          <h3 className="spacer-bottom">{translate('quality_gates.projects')}</h3>
+          <header className="display-flex-center spacer-bottom">
+            <h3>{translate('quality_gates.projects')}</h3>
+            <DocTooltip className="spacer-left" doc="quality-gates/quality-gate-projects" />
+          </header>
           {gate.isDefault ? (
             defaultMessage
           ) : (
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/DetailsHeader.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/DetailsHeader.tsx
index a661becfdef..8e2b1aa14ba 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/DetailsHeader.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/DetailsHeader.tsx
@@ -23,6 +23,7 @@ import RenameQualityGateForm from './RenameQualityGateForm';
 import CopyQualityGateForm from './CopyQualityGateForm';
 import DeleteQualityGateForm from './DeleteQualityGateForm';
 import { fetchQualityGate, QualityGate, setQualityGateAsDefault } from '../../../api/quality-gates';
+import DocTooltip from '../../../components/docs/DocTooltip';
 import { Button } from '../../../components/ui/buttons';
 import { translate } from '../../../helpers/l10n';
 
@@ -73,10 +74,15 @@ export default class DetailsHeader extends React.PureComponent<Props, State> {
       <div className="layout-page-header-panel layout-page-main-header issues-main-header">
         <div className="layout-page-header-panel-inner layout-page-main-header-inner">
           <div className="layout-page-main-inner">
-            <h2 className="pull-left">
-              {qualityGate.name}
-              {qualityGate.isBuiltIn && <BuiltInQualityGateBadge className="spacer-left" />}
-            </h2>
+            <div className="pull-left display-flex-center">
+              <h2>{qualityGate.name}</h2>
+              {qualityGate.isBuiltIn && (
+                <>
+                  <BuiltInQualityGateBadge className="spacer-left" />
+                  <DocTooltip className="spacer-left" doc="quality-gates/built-in-quality-gate" />
+                </>
+              )}
+            </div>
 
             <div className="pull-right">
               {actions.rename && (
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/ListHeader.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/ListHeader.tsx
index 4a267e581fb..da61b1c5623 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/ListHeader.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/ListHeader.tsx
@@ -21,6 +21,7 @@ import * as React from 'react';
 import CreateQualityGateForm from '../components/CreateQualityGateForm';
 import { QualityGate } from '../../../api/quality-gates';
 import { Organization } from '../../../app/types';
+import DocTooltip from '../../../components/docs/DocTooltip';
 import { Button } from '../../../components/ui/buttons';
 import { translate } from '../../../helpers/l10n';
 
@@ -50,7 +51,6 @@ export default class ListHeader extends React.PureComponent<Props, State> {
 
     return (
       <header className="page-header">
-        <h1 className="page-title">{translate('quality_gates.page')}</h1>
         {this.props.canCreate && (
           <div className="page-actions">
             <Button id="quality-gate-add" onClick={this.openCreateQualityGateForm}>
@@ -58,6 +58,10 @@ export default class ListHeader extends React.PureComponent<Props, State> {
             </Button>
           </div>
         )}
+        <div className="display-flex-center">
+          <h1 className="page-title">{translate('quality_gates.page')}</h1>
+          <DocTooltip className="spacer-left" doc="quality-gates/quality-gate" />
+        </div>
         {this.state.createQualityGateOpen && (
           <CreateQualityGateForm
             onClose={this.closeCreateQualityGateForm}
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/components/ProfileLink.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/components/ProfileLink.tsx
index c30eff07980..af274592121 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/components/ProfileLink.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/components/ProfileLink.tsx
@@ -32,8 +32,8 @@ interface Props {
 export default function ProfileLink({ name, language, organization, children, ...other }: Props) {
   return (
     <Link
-      to={getProfilePath(name, language, organization)}
       activeClassName="link-no-underline"
+      to={getProfilePath(name, language, organization)}
       {...other}>
       {children}
     </Link>
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/home/ProfilesList.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/home/ProfilesList.tsx
index 812d6110047..ae1e57854f9 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/home/ProfilesList.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/home/ProfilesList.tsx
@@ -21,6 +21,7 @@ import * as React from 'react';
 import { groupBy, pick, sortBy } from 'lodash';
 import ProfilesListRow from './ProfilesListRow';
 import ProfilesListHeader from './ProfilesListHeader';
+import DocTooltip from '../../../components/docs/DocTooltip';
 import { translate, translateWithParameters } from '../../../helpers/l10n';
 import { Profile } from '../types';
 
@@ -61,7 +62,13 @@ export default class ProfilesList extends React.PureComponent<Props> {
             {', '}
             {translateWithParameters('quality_profiles.x_profiles', profilesCount)}
           </th>
-          <th className="text-right nowrap">{translate('quality_profiles.list.projects')}</th>
+          <th className="text-right nowrap">
+            {translate('quality_profiles.list.projects')}
+            <DocTooltip
+              className="table-cell-doc"
+              doc="quality-profiles/quality-profile-projects"
+            />
+          </th>
           <th className="text-right nowrap">{translate('quality_profiles.list.rules')}</th>
           <th className="text-right nowrap">{translate('quality_profiles.list.updated')}</th>
           <th className="text-right nowrap">{translate('quality_profiles.list.used')}</th>
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/home/ProfilesListRow.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/home/ProfilesListRow.tsx
index 677ce226b99..a0b3302ff48 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/home/ProfilesListRow.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/home/ProfilesListRow.tsx
@@ -28,6 +28,7 @@ import { getRulesUrl } from '../../../helpers/urls';
 import { isStagnant } from '../utils';
 import { Profile } from '../types';
 import Tooltip from '../../../components/controls/Tooltip';
+import DocTooltip from '../../../components/docs/DocTooltip';
 
 interface Props {
   onRequestFail: (reason: any) => void;
@@ -41,14 +42,21 @@ export default class ProfilesListRow extends React.PureComponent<Props> {
     const { profile } = this.props;
     const offset = 25 * (profile.depth - 1);
     return (
-      <div style={{ paddingLeft: offset }}>
-        <ProfileLink
-          language={profile.language}
-          name={profile.name}
-          organization={this.props.organization}>
-          {profile.name}
-        </ProfileLink>
-        {profile.isBuiltIn && <BuiltInQualityProfileBadge className="spacer-left" />}
+      <div className="display-flex-center" style={{ paddingLeft: offset }}>
+        <div>
+          <ProfileLink
+            language={profile.language}
+            name={profile.name}
+            organization={this.props.organization}>
+            {profile.name}
+          </ProfileLink>
+        </div>
+        {profile.isBuiltIn && (
+          <>
+            <BuiltInQualityProfileBadge className="spacer-left" />
+            <DocTooltip className="spacer-left" doc="quality-profiles/built-in-quality-profile" />
+          </>
+        )}
       </div>
     );
   }
@@ -57,7 +65,12 @@ export default class ProfilesListRow extends React.PureComponent<Props> {
     const { profile } = this.props;
 
     if (profile.isDefault) {
-      return <span className="badge">{translate('default')}</span>;
+      return (
+        <>
+          <span className="badge">{translate('default')}</span>
+          <DocTooltip className="table-cell-doc" doc="quality-profiles/default-quality-profile" />
+        </>
+      );
     }
 
     return <span>{profile.projectCount}</span>;
@@ -122,23 +135,23 @@ export default class ProfilesListRow extends React.PureComponent<Props> {
   render() {
     return (
       <tr
-        className="quality-profiles-table-row"
+        className="quality-profiles-table-row text-middle"
         data-key={this.props.profile.key}
         data-name={this.props.profile.name}>
-        <td className="quality-profiles-table-name">{this.renderName()}</td>
-        <td className="quality-profiles-table-projects thin nowrap text-right">
+        <td className="quality-profiles-table-name text-middle">{this.renderName()}</td>
+        <td className="quality-profiles-table-projects thin nowrap text-middle text-right">
           {this.renderProjects()}
         </td>
-        <td className="quality-profiles-table-rules thin nowrap text-right">
+        <td className="quality-profiles-table-rules thin nowrap text-middle text-right">
           {this.renderRules()}
         </td>
-        <td className="quality-profiles-table-date thin nowrap text-right">
+        <td className="quality-profiles-table-date thin nowrap text-middle text-right">
           {this.renderUpdateDate()}
         </td>
-        <td className="quality-profiles-table-date thin nowrap text-right">
+        <td className="quality-profiles-table-date thin nowrap text-middle text-right">
           {this.renderUsageDate()}
         </td>
-        <td className="quality-profiles-table-actions thin nowrap text-right">
+        <td className="quality-profiles-table-actions thin nowrap text-middle text-right">
           <ProfileActions
             fromList={true}
             onRequestFail={this.props.onRequestFail}