I would like to include two graphs inside an informative tooltip that shows up upon hovering a button.
I am using tippy.js.
The html code looks like below:

                 <template name="template_01">
                            <div>
                                <i class="fa-solid fa-award"></i>
                                <b>Best match!</b>
                                <button class="button-7" role="button">Explain More?
                                </button>
                            </div>
                 </template>

…

and the .js

  Template.template_01.events({
      'mouseenter .button-7':async function (event, instance) {
        event.preventDefault()
        similarityPct = Session.get('aggregatedSimilarity')
        tippy('.button-7', {
          content: 'MaaS Plan 1 is '+ (Object.values(similarityPct)[0] * 100).toFixed(2) + '% similar to the user profile.{{> pieChartPlan}}',
          allowHTML: true,
        });
      }
})

  Template.registerHelper(
  'pieChartPlan', function (){
    return '<template name="pieChartPlan"><div class="wrapper"><div class="pie-wrap"><div class="light-yellow entry"><p>25%</p><p class="entry-value">Rice</p></div><div class="sky-blue entry"><p>25%</p><p class="entry-value">Pasta</p></div><div class="pink entry"><p>12.5%</p><p class="entry-value">Beans </p></div><div class="purple entry"><p> 12.5%</p><p class="entry-value">Plantain</p></div><div class="green entry"><p> 12.5%</p><p class="entry-value">Potato</p></div><div class="wheat entry"><p> 12.5%</p><p class="entry-value">Yam</p></div></div><div class="key-wrap"></div></div></template>'
  });