Tooltip component

index.js

import { compose, withState, onlyUpdateForKeys } from 'recompose';
import { themr } from 'react-css-themr';
import Tooltip from './Tooltip';
import style from './Tooltip.css';

export default compose(
  themr('Tooltip', style),
  withState('hover', 'onHover', false),
  onlyUpdateForKeys(['hover']),
)(Tooltip);

Tooltip.js

import React, { PropTypes } from 'react';
import classNames from 'classnames';

const Tooltip = ({ children, text, position, hover, onHover, theme }) => {
  const popup = classNames(theme.popup, theme[position]);
  return (
    <span
      className={theme.tooltip}
      onMouseEnter={() => onHover(true)}
      onMouseLeave={() => onHover(false)}
    >
      {hover && <span className={popup}>{text}</span>}
      {children || ''}
    </span>
  );
};

Tooltip.propTypes = {
  children: PropTypes.node,
  text: PropTypes.string,
  position: PropTypes.oneOf([
    'left',
    'top',
    'right',
    'bottom',
  ]),
  hover: PropTypes.bool,
  onHover: PropTypes.func,
  theme: PropTypes.shape({
    tooltip: PropTypes.string,
    popup: PropTypes.string,
    left: PropTypes.string,
    top: PropTypes.string,
    right: PropTypes.string,
    bottom: PropTypes.string,
  }),
};

Tooltip.defaultProps = {
  theme: {},
  text: '',
  position: 'left',
};

export default Tooltip;

Tooltip.test.js

import React from 'react';
import { shallow } from 'enzyme';
import Tooltip from './Tooltip.js';

const wrapper = shallow(<Tooltip />);

describe('(Component) Tooltip', () => {
  it('renders without exploding', () => {
    expect(wrapper).toHaveLength(1);
  });
});