Tooltip Attachment and Scaling Behavior

@Charles wrote:

go.js version 1.4.20

I'm attempting to combine two types of behavior for a panel/tooltip and not having much luck.

I would like to combine the placement behavior of https://gojs.net/latest/samples/hoverButtons.html, where I attach a 'tooltip' adornment to the side of the graphObject shape the mouseHover event is firing on (roundedRectangle)

with the 'scaling' behavior of a tooltip where it does not scale with the diagram to make the tooltips look consistent and to make them readable even in very large diagrams.

Current tooltip code:

template =
    GO(go.Node, "Spot",
        new go.Binding("location", "", getLocation),
        {
            props...
        },
        // the main content:
        GO(go.Panel, "Vertical", {
                mouseHover: taskHover
            },
            GO(go.Shape, "RoundedRectangle",
                {
                    props...
                },
                bindings...
            )
        ),
        GO(go.TextBlock,
            bindings...
        ),
        portgetters...
    );
}

function subflowHover(e, obj) {
    var node = obj.part;
    subflowTooltip.adornedObject = node;
    node.addAdornment("subflowHover", subflowTooltip);
}

var subflowTooltip =
    GO(go.Adornment, "Spot",
        {
            background: "transparent",
            mouseLeave: function(e, obj) {
                var ad = obj.part;
                ad.adornedPart.removeAdornment("subflowHover");
            }
        },
        GO(go.Placeholder,
            {
                background:"transparent",
            }
        ),
        GO(go.Panel, "Auto",
            {
                background:"transparent",
                alignment: new go.Spot(1,0.5,0,-1*STATUS_ICON_SIZE/2),
                alignmentFocus: go.Spot.LeftCenter
            },
            GO(go.Shape, "RoundedRectangle", {fill: "white"}),
            GO(go.Panel, "Vertical",
                {
                    background:"transparent"
                },
                GO(go.TextBlock, {margin:5},
                    new go.Binding("text", "modelObject", function(modelObject) {
                        return modelObject.getTooltipTitle();
                    })
                )
            )
        )
    );

I can get both behaviors independently, but I cannot make them both work together. I was expecting the placeholder on the tooltip to actually attach itself to the node, but it follows the mouse cursor for some reason.

Posts: 2

Participants: 2

Read full topic