Tooltip Manager with Mobservable (simplified)

tooltip-mgr.js

import {makeReactive, sideEffect, asReference, transaction} from 'mobservable'

function TooltipManager() {
  const DOM_ROOT = document.getElementById('tooltip_root')
  const LEAVE_DELAY = 400

  let state = makeReactive({
    hoverCount: 0,
    tooltip: asReference(null),
    position: asReference({})
  })

  sideEffect( _ => {
    // console.debug('hoverCount:', state.hoverCount)
    if( state.hoverCount > 0 ) {
      React.render(
        <Tooltip {...state.tooltip} position={state.position} />,
        DOM_ROOT
      )
    }
    else {
      React.unmountComponentAtNode( DOM_ROOT )
    }
  })

  return function attachTooltipDOMHandlers( options={} ) {
    if(! options.content ) throw new Error("Tooltips need content!")

    return {
      onMouseEnter(e) {
        transaction( _ => {
          state.hoverCount += 1
          state.tooltip = options
          state.position = RectTools.getRect( e.currentTarget || e.target )
        })
        options.onMouseEnter && options.onMouseEnter(e)
      },
      onMouseLeave(e) {
        setTimeout( _ => {
          state.hoverCount -= 1
        }, LEAVE_DELAY)
        options.onMouseLeave && options.onMouseLeave(e)
      }
    }
  }
}