Maximo

 View Only

 Tooltip on barcode-button in Maximo Mobile

guillaume munger's profile image
guillaume munger posted Tue April 14, 2026 11:46 AM

Hi,

I am trying to add a tooltip to a barcode-button, but I am unable to get it to display.

I first tried the following approach:

<barcode-button tooltip-text="Assetnum" icon="maximo:scan" kind="primary" on-scan="handleAssetScan" hidden="{!woDetailResource.item.assetnum}" padding="false" id="edeyd">
      <tooltip id="a1_dn8pr"/>
</barcode-button>
I also attempted a simpler implementation:
<barcode-button tooltip-text="Assetnum" icon="maximo:scan" kind="primary" on-scan="handleAssetScan" hidden="{!woDetailResource.item.assetnum}" padding="false" id="edeyd"/>

In both cases, the tooltip does not appear when I hover my mouse over the button. Could you please confirm whether tooltips are supported on barcode-button, or if there is a recommended alternative?

Thank you.

Bartosz Marchewka's profile image
Bartosz Marchewka IBM Champion

Hi @guillaume munger,

It looks like even if tooltip-text property is available in xml schema and also tooltip as child component for barcode-button component they are not implemented in framework. I briefly checked and found out that tooltip solution is missing in barcode-button.js file. Please check below implementation for barcode-button.js vs button.js where tooltip solution works properly.

I would recommend raising this with IBM to determine whether this is an unintentional gap in the framework or a decision on purpose.

/lib/ejs/transformers/react/components/barcode-button.js

import validateBarcodeReader from '../../../util/validateBarcodeReader';
function handleElement(element, processor, registry, attributes) {
  var react = processor.transformer;
  react.addMaximoImport('BarcodeButton');
  processor.checkForButtons(processor.parent(element));

  //istanbul ignore else
  if (attributes.icon) {
    attributes['icon-name'] = attributes.icon;
    Reflect.deleteProperty(attributes, 'icon');
  }
  //istanbul ignore else
  validateBarcodeReader(attributes);
  var attributeList = react.getElementAttributeList(registry, attributes, element, processor);
  react.appendln("<BarcodeButton ".concat(attributeList, "/>"));
}
export default handleElement;

lib/ejs/transformers/react/components/button.js

function handleElement(element, processor, registry, attributes) {
  var react = processor.transformer;
  react.addMaximoImport('Button');
  processor.checkForButtons(processor.parent(element));
  var tooltip = '';

  //assign default button kind
  if (!attributes.kind) {
    //icon-only button kind
    if (!attributes.label && attributes.icon) {
      attributes.kind = 'ghost';
    } else {
      attributes.kind = 'primary';
    }
  }

  //istanbul ignore else
  if (attributes.icon) {
    attributes['icon-name'] = attributes.icon;
    Reflect.deleteProperty(attributes, 'icon');
  }
  var attributeList = react.getElementAttributeList(registry, attributes, element, processor);
  var tooltipText = react.processBindings('tooltip-text', attributes['tooltip-text'], {
    element: element,
    attributes: attributes,
    registry: registry,
    processor: processor
  });

  //process children
  processor.processChildren(element);

  //check if tooltip-text is defined on the element and make sure no tooltip element is defined.
  if (tooltipText) {
    //When processing a tooltip element, it will set the tooltip attribute on its parent if the parent allows tooltips.
    if (element.attributes.tooltip) {
      processor.processError("Both tooltip-text and the tooltip element can not be defined at the same time. ".concat(attributes.id), 'error_button_tooltip', element);
    } else {
      //define basic tooltip text ui
      tooltip = "{\n        content: <div id=\"button_tooltip_".concat(attributes.id, "\" className=\"cds--form-item\">{").concat(tooltipText, "}</div>\n      }");
    }
  }
  if (element.attributes && element.attributes.tooltip) {
    tooltip = element.attributes.tooltip;
  }
  if (tooltip) {
    react.appendln("<Button ".concat(attributeList, " tooltip={").concat(tooltip, "}/>"));
  } else {
    react.appendln("<Button ".concat(attributeList, " />"));
  }
}
export default handleElement;
guillaume munger's profile image
guillaume munger

Thank you, Bartosz, for your input. I could certainly escalate this matter to IBM if necessary.

In the meantime, I was fortunately able to identify and implement a workaround.

              <button icon="maximo:scan" kind="primary" hidden="{!woDetailResource.item.assetnum}" padding="false" id="edeyd">
                <tooltip id="a1_dn8pr">
                  <label slot="content" wrap="true" id="tooltipLabel" label="Scanner le numéro de l'actif"/>
                  <barcode-button slot="button" icon="maximo:scan" kind="primary" on-scan="handleAssetScan" hidden="{!woDetailResource.item.assetnum}" padding="false" id="a1_nagjx"/>
                </tooltip>
              </button>