add tooltip to action items
-import * as H from '@syndesis/history';
import {
DataListAction,
DataListCell,
DataListItem,
DataListItemCells,
- DataListItemRow
+ DataListItemRow,
+ Tooltip
} from '@patternfly/react-core';
+import * as H from '@syndesis/history';
import * as React from 'react';
import { useState } from 'react';
import { toValidHtmlId } from '../../helpers';
@@ -48,7 +49,9 @@ export const ApiConnectorListItem: React.FC<
i18nDelete,
i18nDeleteModalMessage,
i18nDeleteModalTitle,
+ i18nDeleteTip,
i18nDetails,
+ i18nDetailsTip,
i18nUsedByMessage,
onDelete,
usedBy
@@ -123,6 +126,17 @@ export const ApiConnectorListItem: React.FC<
aria-labelledby={'single-action-item1 single-action-action1'}
id={'single-action-action1'}
aria-label={'Actions'}
+ >
+ <Tooltip
+ position={'top'}
+ enableFlip={true}
+ content={
+ <div id={'detailsTip'}>
+ {i18nDetailsTip
+ ? i18nDetailsTip
+ : i18nDetails}
+ </div>
+ }
>
<ButtonLink
data-testid={'api-connector-list-item-details-button'}
@@ -131,6 +145,19 @@ export const ApiConnectorListItem: React.FC<
>
{i18nDetails}
</ButtonLink>
+ </Tooltip>
+
+ <Tooltip
+ position={'top'}
+ enableFlip={true}
+ content={
+ <div id={'deleteTip'}>
+ {i18nDeleteTip
+ ?i18nDeleteTip
+ : i18nDelete}
+ </div>
+ }
+ >
<ButtonLink
data-testid={'api-connector-list-item-delete-button'}
disabled={usedBy !== 0}
@@ -138,6 +165,7 @@ export const ApiConnectorListItem: React.FC<
>
{i18nDelete}
</ButtonLink>
+ </Tooltip>
</DataListAction>
</DataListItemRow>
</DataListItem>
