如何使用Jquery旋钮将工具提示添加到多级甜甜圈图表

Question

我想在JQuery Knob Arcs上添加工具提示。

这是我迄今取得的成就：

$(document).tooltip({
    track: true
});
$('.knob').val(5).trigger('change');

$(".knob").knob({
    change: function (value) {
        console.log("change : " + value);
    },
    release: function (value) {
        //console.log(this.$.attr('value'));
        console.log("release : " + value);
    },
    cancel: function () {
        console.log("cancel : ", this);
    },
    draw: function () {

    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Knob/1.2.11/jquery.knob.min.js"></script>
<div class="demo" style="height:420px;width:100%">
    <p></p>
    <div style="position:relative;width:350px;margin:auto" title="1300">
        <div style="position:absolute;left:10px;top:10px">
            <input class="knob hour" data-min="0" data-max="24" data-bgColor="#E0E0E0" data-fgColor="#F9A61B" data-displayInput=false data-width="300" data-height="300" data-thickness=".1">
        </div>
        <div style="position:absolute;left:27px;top:27px" title="1200">
            <input class="knob minute" data-min="0" data-max="60" data-bgColor="transparent" data-fgcolor="#2E2E8A" data-displayInput=false data-width="265" data-height="265" data-thickness=".1">
        </div>
        <div style="position:absolute;left:43px;top:43px" title="1100">
            <input class="knob second" data-min="0" data-max="100" data-bgColor="transparent" data-fgColor="#E62E00" data-displayInput=false data-width="233" data-height="233" data-thickness=".10">
        </div>
    </div>
</div>

我使用D3JS和AMChart完成了这项工作，看看D3JS fiddle和AMCharts fiddle 我也想知道哪个是多级甜甜圈图表的更好的库，如果还有其他替代（开源）图表库，请告诉我。