FLOT 工具提示放置？

发布于 2024-12-15 09:31:50 字数 717 浏览 1 评论 0原文

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

我想改变函数中的顶部/底部、左/右就可以做到这一点，但没有运气

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

在此处输入图像描述

原文

There doesn't appear to be a way to move the tooltip in my graph from showing up on the bottom right? This seems very intuitive but I can't find a way to put it above or to the left of the datapoint. Any suggestions? Thanks

I was thinking that changing the top/bottom, left/right in the funciton would do it but no luck

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

土豪 2024-12-22 09:31:50

使用您的语法，看起来顶部和左侧的组合放置得很好（免责声明，我只有方便的 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);

   }

在此处输入图像描述

Using your syntax, it looks like the combination of top and left place it pretty well (disclaimer, I only have Firefox handy to try it).

   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

回复收藏 0 原文

看轻我的陪伴 2024-12-22 09:31:50

您应该使用 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 实际应用，所以我们应该保持自己的状态像这样触摸插件没有很好的指南。

You should use the Craig qTip 2 plug-in to get a better looking tooltip and (I am almost sure) the ability to move the tool tip where you want from the point.
Here you can find an example: http://craigsworks.com/projects/qtip2/demos/flot and the lowwing link bring you to the whole page of the awesome plug-in http://craigsworks.com/projects/qtip2/demos/

That's the code used in the posted example, maybe it could be useful for your purpose...

// 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.
    }
});

I am studying lots of Flot practical application so we should keep ourself in touch as this plug-in doesn't have a great guide.

回复收藏 0 原文

~没有更多了~