use rc-tooltip

5 files changed, 164 insertions, 27 deletions

diff --git a/server/sonar-web/package.json b/server/sonar-web/package.json
index 2b942f126a4..b600d154dd8 100644
--- a/server/sonar-web/package.json
+++ b/server/sonar-web/package.json
@@ -19,6 +19,7 @@
     "lodash": "4.6.1",
     "moment": "2.10.6",
     "numeral": "1.5.3",
+    "rc-tooltip": "^3.4.2",
     "react": "15.4.2",
     "react-addons-shallow-compare": "15.4.2",
     "react-dom": "15.4.2",
diff --git a/server/sonar-web/src/main/js/apps/projects/components/ProjectCardLanguages.js b/server/sonar-web/src/main/js/apps/projects/components/ProjectCardLanguages.js
index 487f40059b9..f7bbb1a7e33 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/ProjectCardLanguages.js
+++ b/server/sonar-web/src/main/js/apps/projects/components/ProjectCardLanguages.js
@@ -20,7 +20,7 @@
 import React from 'react';
 import sortBy from 'lodash/sortBy';
 import { connect } from 'react-redux';
-import { TooltipsContainer } from '../../../components/mixins/tooltips-mixin';
+import Tooltip from '../../../components/controls/Tooltip';
 import { getLanguages } from '../../../store/rootReducer';
 import { translate } from '../../../helpers/l10n';
 
@@ -41,16 +41,24 @@ class ProjectCardLanguages extends React.Component {
     }
 
     const parsedLanguages = distribution.split(';').map(item => item.split('='));
-    const finalLanguages = sortBy(parsedLanguages, l => -1 * Number(l[1]))
-        .slice(0, 2)
-        .map(l => this.getLanguageName(l[0]));
+    const finalLanguages = sortBy(parsedLanguages, l => (-1) * Number(l[1]))
+      .slice(0, 2)
+      .map(l => this.getLanguageName(l[0]));
+
+    const tooltip = (
+      <span>
+        {finalLanguages.map(language => <span key={language}>{language}<br/></span>)}
+      </span>
+    );
 
     return (
-        <TooltipsContainer options={{ delay: { show: 500, hide: 0 } }}>
-          <div className="project-card-languages">
-            <span title={finalLanguages.join('<br/>')} data-toggle="tooltip">{finalLanguages.join(', ')}</span>
-          </div>
-        </TooltipsContainer>
+      <div className="project-card-languages">
+        <Tooltip placement="bottom" overlay={tooltip}>
+          <span title={finalLanguages.join('<br/>')} data-toggle="tooltip">
+            {finalLanguages.join(', ')}
+          </span>
+        </Tooltip>
+      </div>
     );
   }
 }
diff --git a/server/sonar-web/src/main/js/components/controls/Tooltip.js b/server/sonar-web/src/main/js/components/controls/Tooltip.js
new file mode 100644
index 00000000000..3c33ff6285f
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/controls/Tooltip.js
@@ -0,0 +1,41 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2017 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+// @flow
+import React from 'react';
+import TooltipCore from 'rc-tooltip';
+
+export default class Tooltip extends React.PureComponent {
+  props: {
+    placement?: string
+  };
+
+  static defaultProps = {
+    placement: 'bottom'
+  };
+
+  render () {
+    return (
+      <TooltipCore
+        destroyTooltipOnHide={true}
+        placement={this.props.placement}
+        {...this.props}/>
+    );
+  }
+}
diff --git a/server/sonar-web/src/main/less/components/tooltips.less b/server/sonar-web/src/main/less/components/tooltips.less
index 4c983420331..eb225f10112 100644
--- a/server/sonar-web/src/main/less/components/tooltips.less
+++ b/server/sonar-web/src/main/less/components/tooltips.less
@@ -23,40 +23,52 @@
 
 @background: #475760;
 
-.tooltip {
+.tooltip,
+.rc-tooltip {
   position: absolute;
   z-index: @tooltip-z-index;
   display: block;
+  height: auto;
   font-size: @smallFontSize;
   font-weight: 300;
   line-height: 1.5;
+  animation: fadeIn 0.3s forwards;
+}
+
+.rc-tooltip-hidden {
+  display: none;
 }
 
 .tooltip.in {
 
 }
 
-.tooltip.top {
+.tooltip.top,
+.rc-tooltip-placement-top {
   padding: 5px 0;
   margin-top: -3px;
 }
 
-.tooltip.right {
+.tooltip.right,
+.rc-tooltip-placement-right {
   padding: 0 5px;
   margin-left: 3px;
 }
 
-.tooltip.bottom {
+.tooltip.bottom,
+.rc-tooltip-placement-bottom {
   padding: 5px 0;
   margin-top: 3px;
 }
 
-.tooltip.left {
+.tooltip.left,
+.rc-tooltip-placement-left {
   padding: 0 5px;
   margin-left: -3px;
 }
 
-.tooltip-inner {
+.tooltip-inner,
+.rc-tooltip-inner {
   max-width: 300px;
   padding: 3px 8px;
   color: #fff;
@@ -68,14 +80,16 @@
   overflow: hidden;
 }
 
-.tooltip-arrow {
+.tooltip-arrow,
+.rc-tooltip-arrow {
   position: absolute;
   width: 0;
   height: 0;
   border: solid transparent;
 }
 
-.tooltip.top .tooltip-arrow {
+.tooltip.top .tooltip-arrow,
+.rc-tooltip-placement-top .rc-tooltip-arrow {
   bottom: 0;
   left: 50%;
   margin-left: -5px;
@@ -83,7 +97,8 @@
   border-top-color: @background;
 }
 
-.tooltip.top-left .tooltip-arrow {
+.tooltip.top-left .tooltip-arrow,
+.rc-tooltip-placement-topLeft .rc-tooltip-arrow {
   right: 5px;
   bottom: 0;
   margin-bottom: -5px;
@@ -91,7 +106,8 @@
   border-top-color: @background;
 }
 
-.tooltip.top-right .tooltip-arrow {
+.tooltip.top-right .tooltip-arrow,
+.rc-tooltip-placement-topRight .rc-tooltip-arrow {
   bottom: 0;
   left: 5px;
   margin-bottom: -5px;
@@ -99,7 +115,8 @@
   border-top-color: @background;
 }
 
-.tooltip.right .tooltip-arrow {
+.tooltip.right .tooltip-arrow,
+.rc-tooltip-placement-right .rc-tooltip-arrow {
   top: 50%;
   left: 0;
   margin-top: -5px;
@@ -107,7 +124,8 @@
   border-right-color: @background;
 }
 
-.tooltip.left .tooltip-arrow {
+.tooltip.left .tooltip-arrow,
+.rc-tooltip-placement-left .rc-tooltip-arrow {
   top: 50%;
   right: 0;
   margin-top: -5px;
@@ -115,7 +133,8 @@
   border-left-color: @background;
 }
 
-.tooltip.bottom .tooltip-arrow {
+.tooltip.bottom .tooltip-arrow,
+.rc-tooltip-placement-bottom .rc-tooltip-arrow {
   top: 0;
   left: 50%;
   margin-left: -5px;
@@ -123,7 +142,8 @@
   border-bottom-color: @background;
 }
 
-.tooltip.bottom-left .tooltip-arrow {
+.tooltip.bottom-left .tooltip-arrow,
+.rc-tooltip-placement-bottomLeft .rc-tooltip-arrow {
   top: 0;
   right: 5px;
   margin-top: -5px;
@@ -131,10 +151,16 @@
   border-bottom-color: @background;
 }
 
-.tooltip.bottom-right .tooltip-arrow {
+.tooltip.bottom-right .tooltip-arrow,
+.rc-tooltip-placement-bottomRight .rc-tooltip-arrow {
   top: 0;
   left: 5px;
   margin-top: -5px;
   border-width: 0 5px 5px;
   border-bottom-color: @background;
 }
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
\ No newline at end of file
diff --git a/server/sonar-web/yarn.lock b/server/sonar-web/yarn.lock
index 45ba783706e..1e982eb8843 100644
--- a/server/sonar-web/yarn.lock
+++ b/server/sonar-web/yarn.lock
@@ -52,6 +52,12 @@ acorn@^4.0.1:
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.4.tgz#17a8d6a7a6c4ef538b814ec9abac2779293bf30a"
 
+add-dom-event-listener@1.x:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/add-dom-event-listener/-/add-dom-event-listener-1.0.2.tgz#8faed2c41008721cf111da1d30d995b85be42bed"
+  dependencies:
+    object-assign "4.x"
+
 ajv-keywords@^1.0.0:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-1.4.1.tgz#f080e635e230baae26537ce727f260ae62b43802"
@@ -794,7 +800,7 @@ babel-register@^6.22.0:
     mkdirp "^0.5.1"
     source-map-support "^0.4.2"
 
-babel-runtime@^6.0.0, babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime@^6.20.0, babel-runtime@^6.22.0, babel-runtime@^6.9.0:
+babel-runtime@6.x, babel-runtime@^6.0.0, babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime@^6.20.0, babel-runtime@^6.22.0, babel-runtime@^6.9.0:
   version "6.22.0"
   resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.22.0.tgz#1cf8b4ac67c77a4ddb0db2ae1f74de52ac4ca611"
   dependencies:
@@ -1252,6 +1258,16 @@ commondir@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
 
+component-classes@^1.2.5:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/component-classes/-/component-classes-1.2.6.tgz#c642394c3618a4d8b0b8919efccbbd930e5cd691"
+  dependencies:
+    component-indexof "0.0.3"
+
+component-indexof@0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/component-indexof/-/component-indexof-0.0.3.tgz#11d091312239eb8f32c8f25ae9cb002ffe8d3c24"
+
 compressible@~2.0.8:
   version "2.0.9"
   resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.9.tgz#6daab4e2b599c2770dd9e21e7a891b1c5a755425"
@@ -1374,6 +1390,12 @@ crypto-browserify@~3.2.6:
     ripemd160 "0.2.0"
     sha.js "2.2.6"
 
+css-animation@^1.3.0:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/css-animation/-/css-animation-1.3.2.tgz#df515820ef5903733ad2db0999403b3037b8b880"
+  dependencies:
+    component-classes "^1.2.5"
+
 css-color-names@0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
@@ -1598,6 +1620,10 @@ doctrine@1.5.0, doctrine@^1.2.2:
     esutils "^2.0.2"
     isarray "^1.0.0"
 
+dom-align@1.x:
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/dom-align/-/dom-align-1.5.3.tgz#b906b616822a5e599f579ec8505e367c51da7588"
+
 dom-converter@~0.1:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.1.4.tgz#a45ef5727b890c9bffe6d7c876e7b19cb0e17f3b"
@@ -3911,7 +3937,7 @@ oauth-sign@~0.8.1:
   version "0.8.2"
   resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43"
 
-object-assign@^4.0.1, object-assign@^4.1.0:
+object-assign@4.x, object-assign@^4.0.1, object-assign@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.0.tgz#7a3b3d0e98063d43f4c03f2e8ae6cd51a86883a0"
 
@@ -4521,6 +4547,41 @@ raw-loader@~0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-0.5.1.tgz#0c3d0beaed8a01c966d9787bf778281252a979aa"
 
+rc-align@2.x:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/rc-align/-/rc-align-2.3.3.tgz#15e2fd329fde9c2dec16e4a0e0ec20fba2ffdbc0"
+  dependencies:
+    dom-align "1.x"
+    rc-util "4.x"
+
+rc-animate@2.x:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/rc-animate/-/rc-animate-2.3.3.tgz#9f123990aa625c5867ace88412a185e46b307d03"
+  dependencies:
+    css-animation "^1.3.0"
+
+rc-tooltip@^3.4.2:
+  version "3.4.2"
+  resolved "https://registry.yarnpkg.com/rc-tooltip/-/rc-tooltip-3.4.2.tgz#c5c89c347ed790f7f290ef825d5e24e8fb599166"
+  dependencies:
+    rc-trigger "1.x"
+
+rc-trigger@1.x:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/rc-trigger/-/rc-trigger-1.9.1.tgz#70cf50cc268ff46e335ee9c95f46c94d8074275c"
+  dependencies:
+    babel-runtime "6.x"
+    rc-align "2.x"
+    rc-animate "2.x"
+    rc-util "4.x"
+
+rc-util@4.x:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/rc-util/-/rc-util-4.0.2.tgz#5804f8b141a13c8c14d7c265a7d21d298195af46"
+  dependencies:
+    add-dom-event-listener "1.x"
+    shallowequal "^0.2.2"
+
 rc@~1.1.6:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/rc/-/rc-1.1.6.tgz#43651b76b6ae53b5c802f1151fa3fc3b059969c9"
@@ -5054,7 +5115,7 @@ sha.js@2.2.6:
   version "2.2.6"
   resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.2.6.tgz#17ddeddc5f722fb66501658895461977867315ba"
 
-shallowequal@0.2.2:
+shallowequal@0.2.2, shallowequal@^0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-0.2.2.tgz#1e32fd5bcab6ad688a4812cb0cc04efc75c7014e"
   dependencies: