ember-tooltips-error

components.yields-block-slots.js

import Ember from 'ember';
import SlotsMixin from 'ember-block-slots';


export default Ember.Component.extend(SlotsMixin, {
});

controllers.application.js

import Ember from 'ember';
import { computed } from '@ember/object';
import config from 'ember-get-config';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  init() {
    this._super(...arguments);
    // Give the tooltips a target element
    config.APP = { rootElement: "#root" }; 
  },
  
  items: computed(function() {
    return Array(10).fill(0).map((v, i) => i+1);
  }),
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.item {
  background: lightgreen;
  padding: 2px;
  margin: 10px;
  text-align: center;
  cursor: pointer;
}
.item:hover {
  background: mediumseagreen;
}

templates.application.hbs

{{#yields-block-slots as |context|}}

  {{#block-slot 'header'}}
    {{#context.subcomponent}}
      {{!-- No error if this block-slot component is removed: --}}
    	{{!--{{#block-slot 'subcomponent-block-slot'}}
      {{/block-slot}}--}}
    {{/context.subcomponent}}
  {{/block-slot}}
  
  {{#block-slot 'body'}}
    {{#each items as |item|}}
      <div class='item'>
        {{item}}
        {{!-- OR if this ember-tooltip component is removed: --}}
        {{ember-tooltip text=(concat "Tooltip text " item)}}
      </div>
    {{/each}}
  {{/block-slot}}
   
 {{/yields-block-slots}}

templates.components.block-slot-subcomponent.hbs

{{!-- yield once to allow instances to register block slots --}}
{{yield}}
Block Slot Subcomponent
{{#yield-slot 'subcomponent-block-slot'}}
  {{yield}}
{{/yield-slot}}

templates.components.yields-block-slots.hbs

{{#with (hash
  subcomponent=(component 'block-slot-subcomponent')
) as |context|}}

  {{!-- yield once to allow instances to register block slots --}}
  {{yield context}}

  {{#yield-slot 'header'}}
    {{yield context}}
  {{/yield-slot}}
  
  {{#yield-slot 'body'}}
    {{yield context}}
  {{/yield-slot}}
  
{{/with}}

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2",
    "ember-tooltips": "3.0.2",
    "ember-block-slots": "1.1.11"
  }
}