How to show ToolTip on HTML5 Canvas Charts

I have data that shows facilities and revenues but in my chart it is only showing the revenues as tool-tip and i would like to show both the revenue and the facilities as a tool-tip. How can i do that? please help.

<script type="text/javascript">
        $(function () {
            LoadChart();

            $("[id*=rblChartType] input").bind("click", function () {
                LoadChart();
            });

        });
        function LoadChart() {
            var chartType = parseInt($("[id*=rblChartType] input:checked").val());

            $.ajax({
                type: "POST",
                url: "test.aspx/GetChart",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (r) {
                    $("#dvChart").html("");
                    $("#dvLegend").html("");
                    var data = eval(r.d);
                    var el = document.createElement('canvas');
                    $("#dvChart")[0].appendChild(el);

                    //Fix for IE 8
                    if ($.browser.msie && $.browser.version == "8.0") {
                        G_vmlCanvasManager.initElement(el);
                    }
                    var ctx = el.getContext('2d');
                    var userStrengthsChart;
                    switch (chartType) {
                        case 1:
                            userStrengthsChart = new Chart(ctx).Pie(data);
                            break;
                        case 2:
                            userStrengthsChart = new Chart(ctx).Doughnut(data);
                            break;
                    }
                    for (var i = 0; i < data.length; i++) {
                        var div = $("<div />");
                        div.css("margin-bottom", "10px");
                        div.html("<span style = 'display:inline-block;height:10px;width:10px;background-color:" + data[i].color + "'></span> " + data[i].text);
                        $("#dvLegend").append(div);
                    }
                },
                failure: function (response) {
                    alert('There was an error.');
                }
            });
        }
    </script>

<table  border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>

                <asp:RadioButtonList ID="rblChartType" runat="server" RepeatDirection="Horizontal">
                    <asp:ListItem Text="Pie" Value="1" Selected="True" />
                    <asp:ListItem Text="Doughnut" Value="2" />
                </asp:RadioButtonList>
            </td>
        </tr>
        <tr>
            <td>
                <div id="dvChart">
                </div>
            </td>

        </tr>
              <tr>
                        <td>
                <div id="dvLegend" style="display:none">
                </div>
            </td>
              </tr>
    </table>