Merge pull request #1409 from cozy/feat/tooltip

feat: Import the tooltip component from MUI
cozy · Mar 16, 2020 · 0cf2c7e · 0cf2c7e
2 parents ca0046e + 451666b
commit 0cf2c7e
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 0 deletions.
diff --git a/docs/styleguide.config.js b/docs/styleguide.config.js
@@ -74,6 +74,7 @@ module.exports = {
         '../react/Well/index.jsx',
         '../react/Infos/index.jsx',
         '../react/InfosCarrousel/index.jsx',
+        '../react/Tooltip/index.jsx',
         '../react/ContextHeader/index.jsx',
         '../react/Filename/index.jsx',
         '../react/AppTitle/index.jsx',

diff --git a/react/Tooltip/Readme.md b/react/Tooltip/Readme.md
@@ -0,0 +1,8 @@
+### Simplest usage
+
+```js
+import Tooltip from 'cozy-ui/transpiled/react/Tooltip';
+<Tooltip title={'This is an explaination'}><u>hover over me</u></Tooltip>
+```
+
+This component is imported from MUI and has the same API.
diff --git a/react/Tooltip/index.jsx b/react/Tooltip/index.jsx
@@ -0,0 +1,24 @@
+import { withStyles } from '@material-ui/core/styles'
+import { Tooltip } from '@material-ui/core'
+
+// We use css-in-js because using external css may create
+// conflicts of priorities between MUI and cozy-UI.
+// MUI always loads its styes at the end of <head>, making them
+// override any previous selector with the same specificity.
+// It also allows the code using this component to overrides
+// only some rules and not the whole classname.
+const styles = {
+  tooltip: {
+    backgroundColor: 'var(--paleGrey)',
+    borderRadius: '8px',
+    fontSize: '1rem',
+    color: 'var(--black)',
+    lineHeight: '1.3',
+    boxShadow:
+      '0 1px 3px 0 rgba(50, 54, 63, 0.19), 0 6px 18px 0 rgba(50, 54, 63, 0.19)'
+  }
+}
+
+const StyledTooltip = withStyles(styles, { name: 'MuiTooltip' })(Tooltip)
+
+export default StyledTooltip