Tooltip background color

GoJS
1

If I have the following tooltip, how would I be able to change the color of the tooltip background?

  diagram.toolTip =
    $("ToolTip",
      $(go.TextBlock, { margin: 4 },
        // use a converter to display information about the diagram model
        new go.Binding("text", "", diagramInfo))
    );
2

You can set the border shape’s fill:

$("ToolTip",
    { "Border.fill": "lightyellow" },
    . . .

That Shape is named “Border”. Or you could data bind it:

$("ToolTip",
    new go.Binding("Border.fill", "color"),
    . . .

where the Part’s data.color property may be set to a CSS color string.

The definition of “ToolTip” is shown in https://gojs.net/latest/extensions/buttons.js

General info: GoJS Tooltips -- Northwoods Software

2 Likes
3

HI, thanks for the prompt reply, I still have some light grey border on my tool tip, do you know what I need to do to change the color of that. Please see attached.36%20PM

4

In addition, would it be possible to change the shape of the tooltip to roundedRect?

5

So you can know how to modify it.

Or copy the definition and modify it to suit your needs.

6

I got the definition and was able to modify the border radius with parameter1, but I couldn’t figure out how to get rid of the white border, can you please advise?

// Typical usage:
//   toolTip:
//     $("ToolTip",
//       $(go.TextBlock, . . .)
//     )
go.GraphObject.defineBuilder('ToolTip', function (args) {
  var ad = go.GraphObject.make(go.Adornment, 'Auto',
    {
      isShadowed: true,
      shadowColor: 'rgba(0, 0, 0, .4)',
      shadowOffset: new Point(0, 3),
      shadowBlur: 5
    },
    go.GraphObject.make(go.Shape,
      {
        name: 'Border',
        figure: 'RoundedRectangle',
        parameter1: 1,
        parameter2: 1,
        fill: '#F5F5F5',
        stroke: '#F0F0F0',
        spot1: new Spot(0, 0, 4, 6),
        spot2: new Spot(1, 1, -4, -4)
      }
    )
  );
  return ad;
});
7

What white border do you have?

8

Try setting the strokeWidth to 0 on the Border shape.

1 Like