How do I register a component made of a few elements in A-Frame?

Question

I have this fiddle and I'd like to know how I can convert it to a component. It's aimed at showing a tooltip to indicate what a certain room is for, and how it operates (UI-like). I've read some guides on how to create components in the official website but it didn't become clear how to pack a bunch of elements into a single component. I plan on handling positioning according to my usage, I'm just failing to see how to pack more than one element.

<script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
<a-scene>
<!-- Assets -->
<a-assets>
</a-assets>

<!-- Camera -->
<a-entity position="0 1 0" camera universal-controls wasd-controls="fly:true" look-controls></a-entity>

<!-- Scene -->
<a-box position="-1 0.45 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-plane position="0 0 -5" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>

<!-- Pop-up thing -->
<a-image id="popup-bg" position="0.1 1 -2.2" color="#cc00ff" width="3.1" height="3.3"  opacity="0.8"></a-image>
<a-text id="popup-title" position="-0.3 2.4 -2.15" value="Room 2.1" color="#333333"></a-text>
<a-image id="popup-image" position="0.1 1.7 -2.15" color="#ee6400" width="2.2" height="1"></a-image>
<a-entity id="popup-description" position="0.1 0.7 -2.15"
geometry="primitive: plane; width: 2.8; height: 0.52;"
  material="visible:true; color:white;" text="value:Sala de aula regular no periodo matutino e vespertino.; color:#333333; width:2.8; height:0.52; baseline:bottom;"></a-entity>
 <a-text id="popup-schedule-label" position="-1.3 0.35 -2.15" value="Horarios" color="#ccc" width="2.8"></a-text><a-text id="popup-schedule-year" position="-0.8 0.35 -2.15" value="(2017)" color="#ccc" width="2.2"></a-text>
 <a-entity id="popup-schedule-frame" position="0.1 -0.1 -2.15" geometry="primitive: plane; width: 2.8; height: 0.7;" material="color:white"></a-entity><a-text id="popup-schedule-1" position="-1.28 0.15 -2.14" value="<07:30 - 11:40> Biologia (3o ano)" color="#333333" width="2.6"></a-text><a-text id="popup-schedule-2" position="-1.28 0 -2.14" value="<13:10 - 17:30> Administracao (1o ano)" color="#333333" width="2.6"></a-text>
 </a-scene>

Answer 1

Creating multiple elements as a component can be achieved by creating elements and appending them to the base entity:

AFRAME.registerComponent('foo',{
  init:function(){
     let box = document.createElement('a-box');
     let sphere = document.createElement('a-sphere');
     box.setAttribute('whatever you want');
     sphere.setAttribute('whatever you want');
     this.el.appendChild(box);
     box.appendChild(sphere);
  }
});

and add it to any existing entity:

<a-entity foo></a-entity>

---

I like to register my stuff as primitives, so i could use a custom <a-tooltip></a-tooltip> entity added wherever You want:

AFRAME.registerPrimitive('a-tooltip', {
  defaultComponents: {
    foo: {},
  },
  mappings:{
    name:'foo.schemaAttribute',
  }
});

And use it:

<a-tooltip name="whatever"></a-tooltip>

---

If You have multiple entities, You can trigger their <a-tooltip></a-tooltip> child visibility to achieve what you want.

Working fiddle here: https://jsfiddle.net/4b0pskc1/1/

More about primitives here.

Answer 2

Template Component: https://github.com/ngokevin/kframe/tree/master/components/template

<a-scene>
  <a-assets>
    <script id="boxesTemplate">
      <a-box color="${box1color}" position="-1 0 -5"></a-box>
      <a-box color="${box2color}" position="0 1 -5"></a-box>
      <a-box color="${box3color}" position="1 0 -5"></a-box>
    </script>
  </a-assets>

  <a-entity template="src: #boxesTemplate"
            data-box1color="red" data-box2color="green" data-box3color="blue"></a-entity>
</a-scene>