tooltip component

tooltip.js

'use strict';

function noop(){}

var contentView = noop;
var elPos = { left: 0, bottom: 0};

var tooltip = {
  show: function(content, options) {
    return function(event) {
      elPos = event.currentTarget.getBoundingClientRect();
      contentView = function() {
        return content;
      };
    };
  },
  hide: function() {
    contentView = noop;
  },
  view: function() {
    return m('.tooltip', {
      style: 'top: ' + elPos.bottom + 'px; left:  ' + elPos.left + 'px; position: absolute'
    }, contentView());
  }
};

usage.js

// in the view where you want to use the tooltip

m('div', {
  onmouseover: tooltip.show('hurray')
  onmouseout: tooltip.hide
})

// somewhere in a baseView

m('main', [
  // other stuff
  tooltip.view()
]);

This simple version of the tooltip shows the content always below the element. It also has some issues with scrolled pages.

Improved version is in work.