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

enter image description here

Answer 1

使用你的语法，它看起来像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);

   }

enter image description here

Answer 2

您应该使用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实际应用程序，所以我们应该保持自己的联系，因为这个插件没有很好的指导。

FLOT工具提示放置？

2 个答案: