每个栏上的永久工具提示

时间:2014-06-28 11:09:22

标签: javascript jquery flot

我正在使用flotcharts在页面上绘制条形图。我想要显示每个栏上方每个栏的值的工具提示,但它应该是永久性的 - 也就是说,它不应该在悬停或点击时处于活动状态。

我正在使用此代码段,它在悬停时效果很好:

var previousPoint = null,
    previousLabel = null;

function showTooltip(x, y, color, contents) {
    $('<div id="tooltip">' + contents + '</div>').css({
        position: 'absolute',
        display: 'block',
        top: y - 40,
        left: x - 10,
        border: '2px solid ' + color,
        padding: '3px',
            'font-size': '9px',
            'border-radius': '5px',
            'background-color': '#fff',
            'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
        opacity: 0.9
    }).appendTo("body").fadeIn(200);
}


$("#placeholder2").on("plothover", function (event, pos, item) {
    if (item) {
        if ((previousLabel != item.series.label) || (previousPoint != item.dataIndex)) {
            previousPoint = item.dataIndex;
            previousLabel = item.series.label;

            var x = item.datapoint[0];
            var y = item.datapoint[1];

            var color = item.series.color;

            //console.log(item.series.xaxis.ticks[x].label);               

            showTooltip(item.pageX,
            item.pageY,
            color,
                "<strong>" + y + " %</strong><br>");
        }
    } else {
        $("#tooltip").remove();
        previousPoint = null;
    }
});

0 个答案:

没有答案
相关问题