Commit a5f18108 authored by Damien Mariotto's avatar Damien Mariotto
Browse files

Add tooltip component

parent 5533ff78
Pipeline #1870 failed with stage
in 1 minute and 32 seconds
import PropTypes from 'prop-types';
import React from 'react';
import classNames from 'classnames';
import styles from './Tooltip.styles';
import { withStyles } from '../styles';
/**
* Affiche une tooltip au dessus d'un message ou symbole
*/
const Tooltip = ({
classes,
className,
children,
tooltipChildren,
tooltipClassName,
}) => (
<div className={classNames(classes.container, className)}>
{children}
<span className={classNames(classes.tooltip, tooltipClassName)}>
{tooltipChildren}
</span>
</div>
);
Tooltip.propTypes = {
/**
* Objet permettant de modifier les classes utilisées par le composant
*/
classes: PropTypes.object,
/**
* Contenu qui sera toujours visible avec la tooltip qui apparaît au dessus
*/
children: PropTypes.node.isRequired,
/**
* Nom(s) de classe(s) CSS à inclure dans le composant racine
*/
className: PropTypes.string,
/**
* Composant ou message à mettre dans la tooltip
*/
tooltipChildren: PropTypes.node.isRequired,
/**
* Nom(s) de classe(s) CSS à inclure dans la tooltip
*/
tooltipClassName: PropTypes.string,
/**
* Largeur de la tooltip
*/
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
};
Tooltip.defaultProps = {
width: 120,
};
export default withStyles(styles)(Tooltip);
const paddingTooltip = 5;
export default () => ({
container: {
position: 'relative',
display: 'inline-block',
'&:hover': {
'& $tooltip': {
visibility: 'visible',
opacity: 1,
},
},
},
tooltip: {
visibility: 'hidden',
width: ({ width }) => width,
backgroundColor: '#555',
color: '#fff',
fontSize: '0.8rem',
fontWeight: 600,
textAlign: 'center',
padding: paddingTooltip,
borderRadius: 6,
/* Position the tooltip text */
position: 'absolute',
zIndex: 1200,
bottom: '125%',
left: '50%',
marginLeft: ({ width }) => -width / 2 - paddingTooltip,
/* Fade in tooltip */
opacity: 0,
transition: 'opacity 0.3s',
/* Arrow */
'&::after': {
content: '""',
position: 'absolute',
top: '100%',
left: '50%',
marginLeft: '-5px',
borderWidth: '5px',
borderStyle: 'solid',
borderColor: '#555 transparent transparent transparent',
},
},
});
import React from 'react';
import { Col, Row, Tooltip, Text } from '@webalt/react';
const Example = () => (
<Row alignItems='center' justifyContent='center'>
<Col xs={12}>
<Text typography={'h2'}>Exemple :</Text>
</Col>
<Col xs={12}>
<Tooltip
tooltipChildren={
<span>
Message dans la tooltip qui peut être plutôt long si on a envie. Si
ça fait trop gros comme bloc on peut augmenter la prop width pour
étirer le message.
</span>
}
>
<span>Aide</span>
</Tooltip>
</Col>
</Row>
);
export default Example;
export { default } from './Tooltip';
......@@ -37,6 +37,7 @@ export { default as Text } from './Text';
export { default as TextField } from './TextField';
export { default as ToggleInput } from './ToggleInput';
export { default as Toolbar, FlexibleSpace } from './Toolbar';
export {default as Tooltip} from './Tooltip';
export { createTheme, ThemeProvider, withStyles, withTheme } from './styles';
export { default as wrapToTest } from './utils/wrapToTest';
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment