improve tooltips on web api page

5 files changed, 82 insertions, 61 deletions

diff --git a/server/sonar-web/src/main/js/apps/web-api/components/Action.js b/server/sonar-web/src/main/js/apps/web-api/components/Action.js
index 7e9c41cbc43..5f8b5967589 100644
--- a/server/sonar-web/src/main/js/apps/web-api/components/Action.js
+++ b/server/sonar-web/src/main/js/apps/web-api/components/Action.js
@@ -25,6 +25,7 @@ import Params from './Params';
 import ResponseExample from './ResponseExample';
 import DeprecatedBadge from './DeprecatedBadge';
 import InternalBadge from './InternalBadge';
+import { TooltipsContainer } from '../../../components/mixins/tooltips-mixin';
 
 export default class Action extends React.Component {
   state = {
@@ -52,31 +53,33 @@ export default class Action extends React.Component {
 
     return (
         <div id={actionKey} className="web-api-action">
-          <header className="web-api-action-header">
-            <Link
-                to={{ pathname: '/' + actionKey }}
-                className="spacer-right icon-link"/>
+          <TooltipsContainer>
+            <header className="web-api-action-header">
+              <Link
+                  to={{ pathname: '/' + actionKey }}
+                  className="spacer-right icon-link"/>
 
-            <h3 className="web-api-action-title">
-              {verb}&nbsp;{actionKey}
-            </h3>
+              <h3 className="web-api-action-title">
+                {verb}&nbsp;{actionKey}
+              </h3>
 
-            {action.internal && (
-                <span className="spacer-left">
+              {action.internal && (
+                  <span className="spacer-left">
                   <InternalBadge/>
                 </span>
-            )}
+              )}
 
-            {action.since && (
-                <span className="spacer-left badge">since {action.since}</span>
-            )}
+              {action.since && (
+                  <span className="spacer-left badge">since {action.since}</span>
+              )}
 
-            {action.deprecatedSince && (
-                <span className="spacer-left">
+              {action.deprecatedSince && (
+                  <span className="spacer-left">
                   <DeprecatedBadge since={action.deprecatedSince}/>
                 </span>
-            )}
-          </header>
+              )}
+            </header>
+          </TooltipsContainer>
 
           <div
               className="web-api-action-description markdown"
diff --git a/server/sonar-web/src/main/js/apps/web-api/components/DeprecatedBadge.js b/server/sonar-web/src/main/js/apps/web-api/components/DeprecatedBadge.js
index 212e6622420..bf7b8c0d235 100644
--- a/server/sonar-web/src/main/js/apps/web-api/components/DeprecatedBadge.js
+++ b/server/sonar-web/src/main/js/apps/web-api/components/DeprecatedBadge.js
@@ -27,7 +27,8 @@ export default function DeprecatedBadge ({ since }) {
   return (
       <span
           className="badge badge-warning"
-          title={translate('api_documentation.deprecation_tooltip')}>
+          title={translate('api_documentation.deprecation_tooltip')}
+          data-toggle="tooltip">
         {label}
       </span>
   );
diff --git a/server/sonar-web/src/main/js/apps/web-api/components/InternalBadge.js b/server/sonar-web/src/main/js/apps/web-api/components/InternalBadge.js
index cfb87e6c841..013af802b04 100644
--- a/server/sonar-web/src/main/js/apps/web-api/components/InternalBadge.js
+++ b/server/sonar-web/src/main/js/apps/web-api/components/InternalBadge.js
@@ -25,7 +25,8 @@ export default function InternalBadge () {
   return (
       <span
           className="badge badge-danger"
-          title={translate('api_documentation.internal_tooltip')}>
+          title={translate('api_documentation.internal_tooltip')}
+          data-toggle="tooltip">
         internal
       </span>
   );
diff --git a/server/sonar-web/src/main/js/apps/web-api/components/Menu.js b/server/sonar-web/src/main/js/apps/web-api/components/Menu.js
index 09cf1727297..ba2938ca171 100644
--- a/server/sonar-web/src/main/js/apps/web-api/components/Menu.js
+++ b/server/sonar-web/src/main/js/apps/web-api/components/Menu.js
@@ -22,6 +22,7 @@ import { Link } from 'react-router';
 import classNames from 'classnames';
 
 import InternalBadge from './InternalBadge';
+import { TooltipsContainer } from '../../../components/mixins/tooltips-mixin';
 import { getActionKey } from '../utils';
 
 export default function Menu ({ domains, showInternal, showOnlyDeprecated, searchQuery, splat }) {
@@ -44,24 +45,26 @@ export default function Menu ({ domains, showInternal, showOnlyDeprecated, searc
 
   return (
       <div className="api-documentation-results panel">
-        <div className="list-group">
-          {filteredDomains.map(domain => (
-              <Link
-                  key={domain.path}
-                  className={classNames('list-group-item', { 'active': splat.indexOf(domain.path) === 0 })}
-                  to={domain.path}>
-                <h3 className="list-group-item-heading">
-                  {domain.path}
-                  {domain.internal && (
-                      <InternalBadge/>
-                  )}
-                </h3>
-                <p className="list-group-item-text">
-                  {domain.description}
-                </p>
-              </Link>
-          ))}
-        </div>
+        <TooltipsContainer>
+          <div className="list-group">
+            {filteredDomains.map(domain => (
+                <Link
+                    key={domain.path}
+                    className={classNames('list-group-item', { 'active': splat.indexOf(domain.path) === 0 })}
+                    to={domain.path}>
+                  <h3 className="list-group-item-heading">
+                    {domain.path}
+                    {domain.internal && (
+                        <InternalBadge/>
+                    )}
+                  </h3>
+                  <p className="list-group-item-text">
+                    {domain.description}
+                  </p>
+                </Link>
+            ))}
+          </div>
+        </TooltipsContainer>
       </div>
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/web-api/components/Search.js b/server/sonar-web/src/main/js/apps/web-api/components/Search.js
index b62c572a635..ca3ae5e2c4a 100644
--- a/server/sonar-web/src/main/js/apps/web-api/components/Search.js
+++ b/server/sonar-web/src/main/js/apps/web-api/components/Search.js
@@ -21,6 +21,7 @@ import _ from 'underscore';
 import React from 'react';
 
 import Checkbox from '../../../components/shared/checkbox';
+import { TooltipsContainer } from '../../../components/mixins/tooltips-mixin';
 import { translate } from '../../../helpers/l10n';
 
 export default class Search extends React.Component {
@@ -56,31 +57,43 @@ export default class Search extends React.Component {
                 onChange={this.handleSearch.bind(this)}/>
           </div>
 
-          <div className="big-spacer-top">
-            <Checkbox
-                initiallyChecked={showInternal}
-                onCheck={onToggleInternal}/>
-            {' '}
-            <span
-                style={{ cursor: 'pointer' }}
-                title={translate('api_documentation.internal_tooltip')}
-                onClick={onToggleInternal}>
-              Show Internal API
-            </span>
-          </div>
+          <TooltipsContainer>
+            <div className="big-spacer-top">
+              <Checkbox
+                  initiallyChecked={showInternal}
+                  onCheck={onToggleInternal}/>
+              {' '}
+              <span
+                  style={{ cursor: 'pointer' }}
+                  title={translate('api_documentation.internal_tooltip')}
+                  onClick={onToggleInternal}>
+                Show Internal API
+              </span>
+              <i
+                  className="icon-help spacer-left"
+                  title={translate('api_documentation.internal_tooltip')}
+                  data-toggle="tooltip"/>
+            </div>
+          </TooltipsContainer>
 
-          <div className="spacer-top">
-            <Checkbox
-                initiallyChecked={showOnlyDeprecated}
-                onCheck={onToggleDeprecated}/>
-            {' '}
-            <span
-                style={{ cursor: 'pointer' }}
-                title={translate('api_documentation.deprecation_tooltip')}
-                onClick={onToggleDeprecated}>
-              Show Only Deprecated API
-            </span>
-          </div>
+          <TooltipsContainer>
+            <div className="spacer-top">
+              <Checkbox
+                  initiallyChecked={showOnlyDeprecated}
+                  onCheck={onToggleDeprecated}/>
+              {' '}
+              <span
+                  style={{ cursor: 'pointer' }}
+                  title={translate('api_documentation.deprecation_tooltip')}
+                  onClick={onToggleDeprecated}>
+                Show Only Deprecated API
+              </span>
+              <i
+                  className="icon-help spacer-left"
+                  title={translate('api_documentation.deprecation_tooltip')}
+                  data-toggle="tooltip"/>
+            </div>
+          </TooltipsContainer>
         </div>
     );
   }