opentip - help with canvas item within a canvas HTML element

[learnmode]

Hi, I am using Cesium to create a timeline with tracks. The tracks in Cesium are created using function addTrack, which calls .push to create a new track and put into a canvas container. How do I create opentip for each of those object within the HTML canvas element?
Please help.

Below is part of the code: function Timeline(container, clock) { container = getElement(container); var topDiv = document.createElement('div'); topDiv.className = 'cesium-timeline-main'; container.appendChild(topDiv); this._topDiv = topDiv;

   this._topDiv.innerHTML = '<div class="cesium-timeline-bar"></div><div class="cesium-timeline-trackContainer">' +
                                 '<canvas class="cesium-timeline-tracks" width="10" height="1">' +
                                 '</canvas></div><div class="cesium-timeline-needle"></div><span class="cesium-timeline-ruler"></span>';
    this._timeBarEle = this._topDiv.childNodes[0];
    this._trackContainer = this._topDiv.childNodes[1];
    this._trackListEle = this._topDiv.childNodes[1].childNodes[0];
    this._needleEle = this._topDiv.childNodes[2];
    this._rulerEle = this._topDiv.childNodes[3];
    this._context = this._trackListEle.getContext('2d');

    this._trackList = [];

:::: Timeline.prototype.addTrack = function(interval, heightInPx, color, backgroundColor) { var newTrack = new TimelineTrack(interval, heightInPx, color, backgroundColor); this._trackList.push(newTrack); this._lastHeight = undefined; this.resize(); return newTrack; }; ::: } function TimelineTrack(interval, pixelHeight, color, backgroundColor) { this.interval = interval; this.height = pixelHeight; this.color = color || new Color(0.5, 0.5, 0.5, 1.0); this.backgroundColor = backgroundColor || new Color(0.0, 0.0, 0.0, 0.0); }

TimelineTrack.prototype.render = function(context, renderState) {

:::: context.fillStyle = this.color.toCssColorString(); context.fillRect(0, renderState.y, renderState.timeBarWidth, this.height); :::: }