How to use the @patternfly/react-core.TooltipPosition.top function in @patternfly/react-core

const workloadsRows = this.state.workloads.map(workload => {
      return {
        cells: [
          <>
            Workload}>
              WS
            
            {workload.name}
          ,
          // This <> wrapper is needed by Slider
          <>

const workloadsRows = this.state.suspendedRoutes.map(route => {
      return {
        cells: [
          <>
            Workload}>
              WS
            
            {route.workload}
          ,
          // Note that <button> here needs to be wrapped by an external &lt;&gt;, otherwise Icon is not properly rendered.
          &lt;&gt;
            </button><button> : }
              onClick={() =&gt; this.updateRoute(route.workload, !route.suspended)}
            &gt;
              {route.suspended ? 'Suspended' : 'Connected'}
            </button>
          
        ]

let boxY;
    let arrowPoints = ['', '', ''];

    if (!isActive) {
      return null;
    }

    const left = parentBox.x;
    const right = parentBox.x + parentBox.width;
    const top = parentBox.y;
    const bottom = parentBox.y + parentBox.height;
    const centerX = parentBox.x + parentBox.width / 2;
    const centerY = parentBox.y + parentBox.height / 2;

    switch (arrowPosition) {
      case TooltipPosition.top:
        boxX = left + (parentBox.width - bbWidth) / 2 - PADDING_X;
        boxY = top - OFFSET_Y - ARROW_WIDTH - bbHeight - PADDING_Y * 2;
        arrowPoints = [
          `${centerX},${top - OFFSET_Y}`,
          `${centerX - ARROW_HEIGHT / 2},${top - OFFSET_Y - ARROW_WIDTH - 2}`,
          `${centerX + ARROW_HEIGHT / 2},${top - OFFSET_Y - ARROW_WIDTH - 2}`,
        ];
        break;
      case TooltipPosition.bottom:
        boxX = left + (parentBox.width - bbWidth) / 2 - PADDING_X;
        boxY = bottom + OFFSET_Y + ARROW_WIDTH;
        arrowPoints = [
          `${centerX},${bottom + OFFSET_Y}`,
          `${centerX / 2 - ARROW_HEIGHT / 2},${boxY + 2}`,
          `${centerX + ARROW_HEIGHT / 2},${boxY + 2}`,
        ];

const ActionableDetail = ({
  attribute, label, value, textArea, boolean, tooltip, onEdit,
}) => {
  const displayProps = { attribute, value, onEdit };

  return (
    
      
        {label}
        {tooltip &&
          <span>
            
              
            
          </span>
        }
      
      
        {boolean ?
           :
          }
      
    
  );
};

{errors.secret}
        )}
      
      
        
          <button style="{{" type="submit">
            {addEditButtonTextFn(currentStatus)}
          </button>
          
              Add or edit your storage details
            }&gt;
            <span>
              
            </span>
          
          <button style="{{"> checkConnection(values.name)}
          &gt;
            Check Connection
          </button>

return <button>Close</button>;
      case CurrentPlanState.Critical:
        return <button>Close</button>;
      case CurrentPlanState.TimedOut:
        return 
          <button style="{{">
            Close
            </button>
          <button disabled="{isPollingStatus}" style="{{">Check Connection</button>
          
              Re-check plan status.
            }&gt;
            <span></span>
          
        ;
      default:
        return null;
    }
  }
  const StyledCard = styled(Card)`

}>
            <span>
              
            </span>
          
          <button style="{{"> checkConnection(values.name)}
          &gt;
            Check connection
          </button>
          
              Re-check your cluster's connection state
            }&gt;
            <span>
              
            </span>
          
        
        
          
        
        
          <button></button>

{errors.azureBlob}
                )}
            
            
                
                    <button style="{{" type="submit">
                        {addEditButtonTextFn(currentStatus)}
                    </button>
                    
                            Add or edit your storage details
            }&gt;
                        <span>
                            
                        </span>
                    
                    <button style="{{"> checkConnection(values.name)}
                    &gt;
                        Check Connection
          </button>

{rule.routes.map((route, i) => (
              <div>
                Workload}&gt;
                  WS
                
                {route}
              </div>
            ))}

(this.state.threeScaleServiceRule.threeScaleHandlerName === '' && id === 0);
          return (
            
              
                 this.onHandlerToggle('handler' + id)}
                  isExpanded={this.state.handlersExpanded.includes('handler' + id)}
                  id={'handler' + id}
                  aria-controls={'handler' + id}
                />
                
                      {isLinked && (
                        
                              Service <b>{this.props.serviceName}</b> will be linked with 3scale API
                            
                          }
                        &gt;
                          3S
                        
                      )}
                    ,
                    
                      {isLinked &amp;&amp; (
                        &lt;&gt;
                          Service <b>{this.props.serviceName}</b> will be linked with 3scale API using{' '}
                          <b>{handler.name}</b> handler. {handler.modified &amp;&amp; '*'}
                          <br>