gRaphael popup positions

Question

from what I can see, gRaphael only supports 4 positions for placing a popup, up,down,left and right, normally this would be enough, but my line graph has limited space, so the popups are cutting off inside of the SVG. My question is, how can I place the popup in say the up right (top right), up left (top left), down right (bottom right) or the down left (bottom left) position?

how about custom tooltip , like the one I did in the pie chart ? http://jsfiddle.net/vedmack/cuaBX/ that way you control everything... — Daniel, Nov 14 '12 at 09:19
Thanks for the suggestion, I will look into it! :) I am trying to make use of the popups though. Getting those perfect would be #1st prize! — Odyss3us, Nov 14 '12 at 10:31
You will probably want to adjust the positioning of each popup based on the size of the element. Can you please provide a fiddle of your graph with the popups and I'll see what I can do to move them? — sacohe, Nov 19 '12 at 19:08

score 0 · Answer 1 · answered Nov 15 '12 at 15:22

0

How about custom tooltip , create a simple div and append it to your chart container, like the one I did in the pie chart ?

Interactive Pie Chart with Tooltip , That way you control everything...

answered Nov 15 '12 at 15:22

Daniel

36,833
10
119
200

score 0 · Accepted Answer · answered Nov 27 '12 at 20:44

I ended up using qTip, like so...

//show the tooltip
showTip(column.node,column.symbols[0].node,"label",tailPos,tipPos);

function showTip(selector,target,content,tailPosition,tipPosition)
{
    $(selector).qtip({
        content: content,
        position: {
            my: tailPosition,   //tip tail position
            at: tipPosition,    //tip body position
            target: $(target)   //position the tip at this element
        },
        show: {
            ready: true //show popup
        },
        style: {
            classes: 'ui-tooltip-rounded ui-tooltip-dark'
        }

    });
}

worked perfectly. :)

gRaphael popup positions

2 Answers2