react-tooltip.js

import ReactDOM from 'react-dom';


const options = {
  offset: 15
};

const styles = {
  position: 'absolute',
  zIndex: 50,
  background: '#8f4576',
  borderRadius: '3px',
  color: '#ffffff',
  fontSize: 10,
  padding: '6px'
};

let currentTooltip;

export default function installTooltip(nodeOrComponent) {
  // Unmount
  if (!nodeOrComponent) {
    removeTooltip();
    return;
  }

  const node = (nodeOrComponent instanceof HTMLElement)
    ? nodeOrComponent
    : ReactDOM.findDOMNode(nodeOrComponent);

  const tooltipText = node.getAttribute('title');

  if (!tooltipText) return;

  node.setAttribute('title', '');

  node.addEventListener('mouseenter', evt => {
    currentTooltip = createTooltip(tooltipText);
    position(evt);
  });

  node.addEventListener('mouseleave', removeTooltip);

  node.addEventListener('mousemove', position);
}

function position(evt) {
  const { offset } = options;

  const scrollY = window.scrollY || window.pageYOffset;
  const scrollX = window.scrollX || window.pageXOffset;

  let tooltipTop = evt.pageY + offset;
  let tooltipLeft = evt.pageX + offset;

  if (tooltipTop - scrollY + currentTooltip.offsetHeight + 20 >= window.innerHeight)
    tooltipTop = tooltipTop - currentTooltip.offsetHeight - 20;

  if (tooltipLeft - scrollX + currentTooltip.offsetWidth + 20 >= window.innerWidth)
    tooltipLeft = tooltipLeft - currentTooltip.offsetWidth - 20;

  currentTooltip.style.top = tooltipTop + 'px';
  currentTooltip.style.left = tooltipLeft + 'px';
}

function createTooltip(text) {
  const tooltip = document.createElement('div');
  const tooltipText = document.createTextNode(text);

  tooltip.appendChild(tooltipText);

  Object.keys(styles).forEach(s => tooltip.style[s] = styles[s]);

  document.body.appendChild(tooltip);

  return tooltip;
}

function removeTooltip() {
  if (currentTooltip)
    document.body.removeChild(currentTooltip);

  currentTooltip = undefined;
}