Callout Tooltip

GoJS
1

Is it possible to show tool tip which look like a “Callout” instead of default rectangle.
Any easy way to just apply some CSS and and in all diagrams it gets reflected without any code change.

Note - Aware about with html tooltip, it should be possible - but with html toop-tip, i have another issue that when the control is on the rightmost side in diagram, the tool tip is not visible completely due to overflow, so using the default template behavior with custom template set which uses rectangle.

2

Are your tooltips now implemented as GoJS objects or in HTML?

If as GoJS objects, you could use some of code used to implement BalloonLinks to customize your tooltips:
Balloon Links
Comments

3

I am using GoJS objects.
And looking for easy option without code change changing style background or other thing like this sample which uses canvas . So any change in style will reflect in all gojs diagrams where it get reflected.

image
image1218×406 28.9 KB

I assume some div is created in gojs library which displays these tooltips.

4

I guess, I need to define this at centralized location whenever I first initialize the diagram OR include the JS file which contains this code –

go.GraphObject.defineBuilder(‘ToolTip’, function (args) {
var ad = go.GraphObject.make(go.Adornment, ‘Auto’,
{
isShadowed: true,
shadowColor: ‘rgba(1, 1, 1, .8)’,
shadowOffset: new go.Point(8, 8),
shadowBlur: 4
},
go.GraphObject.make(go.Shape,
{
name: ‘Border’,
figure: ‘Circle’,
parameter1: 1,
parameter2: 1,
fill: ‘#4433FD’,
stroke: ‘#F0F0F0’,
spot1: new go.Spot(0, 0, 0, 0),
spot2: new go.Spot(1, 1, 1, 1)
}
)
);
return ad;
});

Tried on code pen, and changes the tooltip presentation. Is that correct ? Or what else i need to do ?

5

When tooltips (or context menus) are implemented as GoJS objects, they are instances of Adornment that have Panels/TextBlocks/Shapes/Pictures in them. No HTMLDivElements are involved.

Yes, that is how to change what the “ToolTip” builder creates. I think you want the Shape.geometry to have the “pointer” that you want, but the details of the geometry should vary depending on the relative position of the tooltip content with the node being adorned.

6

Yes. That is what I needed - Pointer (depending on position tooltip is placed). Can you help me to achieve same by providing the template.

7

That’s why I was pointing you to the BalloonLink extension code which implements a fairly general “balloon” geometry.