Lightning DataTable error message popover not working in Flow

Question

I have a lightning component to allow inline edit on flow. Whenever some changes made on the data table I am validating it from js and adding the error message to the data table eventually.

I am getting the error icon for bad data in the table but when clicking on it the popover not working.

Lightning Component :

var draftValues = event.getParam('draftValues');
    console.log('Draft Values'+JSON.stringify(draftValues));
    
    var availableRecords = component.get("v.records");
    
    var totalErrors = 0;
    var errors = {};// new Map<String, Object>();
    var rowsError = {};// new Map<String, Object>();

    
    draftValues.forEach(function(draftRecord){
        
        var rowErrorMessages = [];
        var rowErrorFieldNames = [];
        var totalPercent = 0;
        
        availableRecords.forEach(function(originalRecord){
            
            if(draftRecord.Id == originalRecord.Id) {
                
                //Total Percentage calcualtion=> Logic removed
            
                if(totalPercent != 100) {
                    rowErrorMessages.push('Overall percentage must be equals to 100');
                    rowErrorFieldNames.push('Overall__c');
                }
                
                if (rowErrorMessages.length > 0) {
                    totalErrors += rowErrorMessages.length;

                    rowsError[originalRecord.Id] = {
                        messages: rowErrorMessages,
                        fieldNames: rowErrorFieldNames,
                        title: originalRecord.Material__c + ' has ' + rowErrorMessages.length + ' error(s)'
                    };
                }
            }
            
        });    
    });
    
    if (totalErrors > 0) {
        var tableMessages = [];// new List<String>();
        
        
        var rowErrorValues = Object.values(rowsError);
        rowErrorValues.forEach(function (rowError) {
            tableMessages.push(rowError.title);
        });
        
        
        errors = {
            /*
             * https://developer.salesforce.com/docs/component-library/bundle/lightning:datatable/example#lightningcomponentdemo:exampleDatatableInlineEdit
             */
            rows: rowsError,
            table: {
                title : 'Some records have errors', // the title of the popover
                messages : tableMessages // A list of messages to be displayed as the popover content
            }
        };
        console.log('Error Details>>'+JSON.stringify(errors));
        component.set("v.errors",errors);
    }

Image of my flow :

Appreciate your help.

Thank you.

Updating with Lightning component code

<lightning:datatable keyField="Id"
                         data="{!v.records}"
                         columns="{!v.columns}"
                         errors="{! v.errors }"
                         hideCheckboxColumn="true"
                         draftValues="{!v.draftValues}"
                         onsave="{!c.handleSave}"/>

Updating the error string in console log. This is the custom error object I am adding in js.

{"rows":{"a1z26000001zNtsAAE":{"messages":["Overall percentage must be equals to 100"],"fieldNames":["Overall__c"],"title":"General Construction Waste has 1 error(s)"}},"table":{"title":"Some records have errors","messages":["General Construction Waste has 1 error(s)"]}}

Answer 1

I was experiencing the same issue with <lightning-datatable /> in a quickaction modal. Following the advice of @arut I saw that a lightning-primitive-datatable-tooltip-bubble showed up in the html after the error icon is clicked.

Turns out it's a z-index issue. If it isn't already, wrap that <lightning:datatable /> in an aura component and inject some css to crank that z-index up:

<aura:component>

  <aura:html tag="style">
    .slds-popover {
      z-index: 10000;
    }
  </aura:html>

  <!--YOUR DATATABLE-->

</aura:component>