Question: How to put a tooltip in a repeat about aurelia-mdl HOT 4 CLOSED

// button-icon.html
<template bindable="click" bindable="tooltipEn">
  <div click.delegate="clickHandle($event)" mdl="button" class="mdl-js-ripple-effect mdl-button--icon" id="button-${id}">
    <i class="material-icons md-dark">
      <template replaceable part="icon">&#xE913;</template> <!--touch_app-->
    </i>
  </div>

  <label if.bind="tooltipEn" mdl="tooltip" class="mdl-tooltip--large" for="button-${id}">
    <template replaceable part="tooltip">click</template>
  </label>
</template>

// button-icon.js
import {bindable, customElement} from 'aurelia-framework';
import {guid} from '../util';

@customElement('button-icon')
export class ButtonIcon {
  id = guid();      // generate unique guid
  @bindable tooltipEn = false;
  @bindable click;

  clickHandle(e) {
    if (typeof this.click === 'function') {
      this.click({event: e});
    }
  }
}

        <button-icon click.call="myClickAction()" tooltip-en.one-way="enableTooltip">
          <template replace-part="icon">&#xE879;</template> <!--exit_to_app-->
          <template replace-part="tooltip">This is my tool tip</template>
        </button-icon>

<span class="mdl-list__item-secondary-action">
  <button id="edit_${$index}" mdl="button" class="mdl-button--icon mdl-button--colored">
    <i class="mdi mdi-pencil"></i>
  </button>
  <label mdl="tooltip" class="mdl-tooltip--large" for="edit_${$index}">
    Edit Task
  </label>
</span>