Tooltip background color

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))
    );

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: https://gojs.net/latest/intro/toolTips.html

1 Like

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

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

So you can know how to modify it.

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

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

What white border do you have?

Try setting the strokeWidth to 0 on the Border shape.

1 Like