index.html

<script type="text/x-handlebars" data-template-name="application">
  {{#tool-tipper text='Fred Smith'}}Fred{{/tool-tipper}}<br>
  {{#tool-tipper text='Joe Bloggs'}}John{{/tool-tipper}}<br>
  {{#tool-tipper text='Jane Doe'}}Jane{{/tool-tipper}}<br>
  {{tool-tips}}
</script>

<script type="text/x-handlebars" data-template-name="components/tool-tip">
  {{attrs.text}}
</script>

<script type="text/x-handlebars" data-template-name="components/tool-tips">
  {{#if text}}
    {{tool-tip text=text}}
  {{/if}}
</script>

scripts.js

var app = Ember.Application.create();

app.TooltipsService = Ember.Service;

app.ToolTipsComponent = Ember.Component.extend({
  tagName: '',
  tooltips: Ember.inject.service(),
  text: Ember.computed.alias('tooltips.text')
});

app.ToolTipperComponent = Ember.Component.extend({
  tooltips: Ember.inject.service(),
  mouseEnter: function() {
    this.set('tooltips.text', this.getAttr('text'));
  },
  mouseLeave: function() {
    this.set('tooltips.text', null);
  }
});