In Ember, how do I create a component that reacts to the action of another component?

I have a button-icon component that, when hovered over, will send a hoverIn and hoverOut action (example code so please forgive any errors):

app/components/button-icon/component.js:

export default Ember.Component.extend({
  didInsertElement: function() {
    // hover in
    this.$().hover(function() {
      this.sendAction('hoverIn');
    ,
    // hover out
    function() {
      this.sendAction('hoverOut');
    }
  },

  // more code here to handle other stuff
});

app/components/button-icon/template.hbs:

<button>{{yield}}</button>

I also have a button-tooltip component that should be displayed when the button is hovered over:

app/components/button-tooltip/component.js:

export default Ember.Component.extend({
    // some code here to handle positioning
});

app/components/button-tooltip/template.hbs:

<div>{{yield}}</div>

In my template, I'd like to use both like so:

app/index/template.hbs:

{{#button-icon}}
  <div>Cat</div>
  {{#button-tooltip}}<img src="cat.png">{{/button-tooltip}}
{{/button-icon}}

{{#button-icon}}
  <div>Dog</div>
  {{#button-tooltip}}<img src="dog.png">{{/button-tooltip}}
{{/button-icon}}

{{#button-icon}}
  <div>Rat</div>
  {{#button-tooltip}}Nobody wants to see a picture of a rat!{{/button-tooltip}}
{{/button-icon}}

How do I get the button-icon to communicate with the button-tooltip so that the tooltip is shown when the icon is hovered over? If I only had one button, I can bind both the button and tooltip to a property on the controller, but I have a variable list of them to display. I can also wrap both components in another component (called button-with-tooltip or something), but this seems like it's starting to get into component-ception.