lamchau
12/14/2013 - 2:59 PM

Ember.Decorator.md

Dear Ember.JS team, for your consideration:

We have things like title and draggable natively: attributes that add behavior to an element. I'd like this ability in ember. It could work something like this:

App.TooltipDecorator = Ember.Decorator.extend({

  tooltipElement: function() {
    return Ember.$('#'+this.get('tooltip'));
  }.property('tooltip'),

  show: function() {
    this.get('tooltipElement').show().position({
      of: this.$()
    });
  },

  hide: function() {
    this.get('tooltipElement').hide();
  }.on('didInsertElement')

  mouseEnter: Ember.aliasMethod('show'),
  
  mouseLeave: Ember.aliasMethod('hide').on('didInsertElement')

  // basically the api in here is the same as for an Ember.View,
  // with dom event hooks, this.$(), on('didInsertElement') etc.

});

And the template:

{{#x-foo tooltip="foo-tooltip"}}Hello and stuff{{/x-foo}}

<div id="foo-tooltip">I am the tooltip</div>

Thanks.