Bootstrap tooltip with complex html in Ember

I want to show an html list in a tooltip in an ember view.

I would like to know how a data from a template can go to a subclass component. Like...

export default Ember.Component.extend({
  didInsertElement: function() {
    $('[data-toggle="tooltip"]').tooltip({
      placement: "bottom",
      html: true,
      title: "<ul> {{#each groups as |group|}} <li>{{group.name}}</li> {{/each}} </ul>"
    });
  }
});

I know I'm completely wrong but you probably understand what I want to do.

I've tried directly in the template like

<a href="#" data-toggle="tooltip" title="<ul>
                                  {{#each groups as |group|}}
                                  <li>{{group.name}}</li>
                                  {{/each}}
  </ul>">{{group_count}}</a>

But the build fails :

A block may only be used inside an HTML element or another block.
Error: A block may only be used inside an HTML element or another block.