FLOT 工具提示放置？

Question

似乎没有办法让我的图表中的工具提示不再显示在右下角？这看起来很直观，但我找不到将它放在数据点上方或左侧的方法。有什么建议？谢谢

我在想改变功能中的顶部/底部，左/右会做到这一点，但没有运气

code

function showTooltip(x, y, contents) {
            $('<div id="tooltip">' + contents + '</div>').css( {
                position: 'absolute',
                display: 'none',
                bottom:  y - 35,
                left:  x + 10,
                border: '1px solid #fdd',
                padding: '2px',
                'background-color': '#fee',
                opacity: 0.80
            }).appendTo("body").fadeIn(200);
         }

code

Answer 1

您应该使用 Craig qTip 2 插件来获得更好看的工具提示，并且（我几乎可以肯定）能够将工具提示从该点移动到您想要的位置。 在这里您可以找到一个示例：http://craigsworks.com/projects/qtip2/demos/flot 和 lowwing 链接将您带到很棒的插件的整个页面http://craigsworks.com/projects/qtip2/demos/

这是发布示例中使用的代码，也许它可能对您的目的有用...

// Create a tooltip on our chart
elem.qtip({
    prerender: true,
    content: 'Loading...', // Use a loading message primarily
    position: {
        viewport: $(window), // Keep it visible within the window if possible
        target: 'mouse', // Position it in relation to the mouse
        adjust: { x: 7 } // ...but adjust it a bit so it doesn't overlap it.
    },
    show: false, // We'll show it programatically, so no show event is needed
    style: {
        classes: 'ui-tooltip-shadow ui-tooltip-tipsy',
        tip: false // Remove the default tip.
    }
});

我正在研究大量的 Flot 实际应用，所以我们应该保持联系，因为这个插件没有很好的指南。

Answer 2

使用您的语法，看起来combination of top and left 放置得很好（免责声明，我只有 Firefox 方便试用）。

   function showTooltip(x, y, contents) {
       $('<div id="tooltip">' + contents + '</div>').css( {
            position: 'absolute',
            display: 'none',
            top:  y - 40,
            left:  x - 100,
            border: '1px solid #fdd',
            padding: '2px',
            'background-color': '#fee',
            opacity: 0.80
        }).appendTo("body").fadeIn(200);

   }