Try to add tooltip(with color name) over the colors when open with the colorpopup bpmn

[Tanish_Sharma]

Hello everyone. I’m working on building a bpmn modeler. I’ve added around 18 colors in colorpopup and added the corresponding legends to give the users more variety of colors if they plan to make a huge model. But the problem is: those 18 colors can confuse the users as most of the colors are variant of a single color by which the differentiation between them is difficult. So I want to add tooltip(which show name of that color) to each color.
May be for it, changes are require in ColorContextPadProvider.js and ColorPopupProvider.js file in color-picker. Can anyone help me how to achieve it as customizing it seems to be difficult to me?

ColorContextPadProvider.js:

export default function ColorContextPadProvider(contextPad, popupMenu, canvas, translate) {
  this._contextPad = contextPad;
  this._popupMenu = popupMenu;
  this._canvas = canvas;
  this._translate = translate;

  contextPad.registerProvider(this);
}

ColorContextPadProvider.$inject = ['contextPad', 'popupMenu', 'canvas', 'translate'];

ColorContextPadProvider.prototype.getContextPadEntries = function () {
  var self = this;

  var actions = {
    'set-color': {
      group: 'edit',
      className: 'bpmn-icon-color',
      title: self._translate('Set Color'),
      imageUrl: colorImageUrl,
      action: {
        click: function (event, element) {
          // get start popup draw start position
          var position = {
            ...getStartPosition(self._canvas, self._contextPad, element),
            cursor: {
              x: event.x,
              y: event.y,
            },
          };

          // open new color-picker popup
          self._popupMenu.open(element, 'color-picker', position);
        },
      },
    },
  };

  return actions;
};

// helpers //////////////////////

function getStartPosition(canvas, contextPad, element) {
  var Y_OFFSET = 5;

  var diagramContainer = canvas.getContainer(),
    pad = contextPad.getPad(element).html;

  var diagramRect = diagramContainer.getBoundingClientRect(),
    padRect = pad.getBoundingClientRect();

  var top = padRect.top - diagramRect.top;
  var left = padRect.left - diagramRect.left;

  var pos = {
    x: left,
    y: top + padRect.height + Y_OFFSET,
  };

  return pos;
}

ColorPopupProvider.js:

export default function ColorPopupProvider(popupMenu, modeling, translate) {
  this._popupMenu = popupMenu;
  this._modeling = modeling;
  this._translate = translate;

  this._popupMenu.registerProvider('color-picker', this);
}

ColorPopupProvider.$inject = ['popupMenu', 'modeling', 'translate'];

ColorPopupProvider.prototype.getEntries = function (element) {
  var self = this;

  var colors = [
    {
      label: 'Default',
      fill: undefined,
    },
    {
      label: 'Color-1',
      fill: '#C0E4F9',
    },
    {
      label: 'Color-2',
      fill: '#22BEF1',
    },
    {
      label: 'Color-3',
      fill: '#9DD15C',
    },
    {
      label: 'Color-4',
      fill: '#F2A245',
    },
    {
      label: 'Color-5',
      fill: '#C69BC6',
    },
    {
      label: 'Color-6',
      fill: '#F69788',
    },
    {
      label: 'Color-7',
      fill: '#F7EE53',
    },
    {
      label: 'Color-8',
      fill: '#81FED5',
    },
    {
      label: 'Color-9',
      fill: '#6CA6C0',
    },
    {
      label: 'Color-10',
      fill: '#B092FF',
    },
    {
      label: 'Color-11',
      fill: '#00BE9C',
    },
    {
      label: 'Color-12',
      fill: '#D9A187',
    },
    {
      label: 'Color-13',
      fill: '#FF7FB7',
    },
    {
      label: 'Color-14',
      fill: '#FA775F',
    },
    {
      label: 'Color-15',
      fill: '#FFDEAE',
    },
    {
      label: 'Color-16',
      fill: '#FFD89C',
    },
    {
      label: 'Color-17',
      fill: '#FFDEDE',
    },
  ];

  var entries = colors.map(function (color) {
    return {
      id: color.label.toLowerCase() + '-color',
      className: 'color-icon-' + color.label.toLowerCase(),
      action: createAction(self._modeling, element, color),
    };
  });

  return entries;
};

function createAction(modeling, element, color) {
  return function () {
    modeling.setColor(element, color);
  };
}

[Tanish_Sharma]

I’ve found the solution. Actually it is already present in this plugin. I just missed to add a line:
title: self._translate(color.label), in ColorPopupProvider.js. Thankyou