use rc-tooltip

3 files changed, 99 insertions, 24 deletions

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