rx tooltip

test.js

var Rx = require('rx');
var Observable = Rx.Observable;
var Subject = Rx.Subject;

var hover = new Subject();
var blur = new Subject();
var hovers = hover.asObservable();
var blurs = blur.asObservable();

var HOVER_TIMER = 300;
var TOOLTIP_TIMER = 1000;

var showTooltips = blurs
  .startWith()
  .flatMapLatest(() => hovers)
  .flatMapLatest(() => Observable.timer(HOVER_TIMER));

var hideTooltips = Observable.merge(
  blurs,
  showTooltips.flatMapLatest(() => Observable.timer(TOOLTIP_TIMER))
);

showTooltips.forEach(() => console.log('show'));
hideTooltips.forEach(() => console.log('hide'));

setTimeout(() => {
  console.log('case 1');
  hover.onNext();
  setTimeout(() => blur.onNext(), 150);
}, 0);

setTimeout(() => {
  console.log('case 2, show tooltip');
  hover.onNext();
  setTimeout(() => blur.onNext(), 500);
}, 1000);

setTimeout(() => {
  console.log('case 3, show tooltip and then hide after a second');
  hover.onNext();
}, 2000);