Skip to content

Commit 333dbc1

Browse files
authored
Merge pull request #44 from dlabaj/longtexttooltip
fix(longtexttooltip): Updated with additional review comments.
2 parents b62f671 + e2a28bd commit 333dbc1

File tree

2 files changed

+7
-5
lines changed

2 files changed

+7
-5
lines changed

packages/module/patternfly-docs/content/extensions/component-groups/examples/LongTextTooltip/LongTextTooltip.md

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,22 @@
11
---
22
section: extensions
33
subsection: Component groups
4-
id: Long text tooltip
4+
id: Long-text tooltip
55
source: react
66
propComponents: ['LongTextTooltip']
77
---
88

99
import LongTextTooltip from "@patternfly/react-component-groups/dist/dynamic/LongTextTooltip";
1010

11-
The **long text tooltip** component is a tooltip that can be used to display long text to users. It uses the `Tooltip` component to display the truncated text passed in as `content`. It uses `maxLength` prop to control the size of the content, and the `Tooltip` component to display the rest of the content.
11+
The **long-text tooltip** component enables you to display long text to users via a tooltip. It builds off of the [tooltip component](https://www.patternfly.org/components/tooltip) to truncate UI text in an element and display the truncated text in a tooltip.
1212

1313
## Examples
1414

15-
### LongTextTooltip component
15+
### Basic long-text tooltip
1616

17-
To provide users with long text, a basic long text tooltip should contain an appropriate and informative `content` and `maxLength`. Additionally you can pass in a `tooltipPosition` to control the position of the tooltip, and `tooltipMaxWidth` to control the tool tip width.
17+
To show users the full value of truncated content, a basic long-text tooltip should contain appropriate and informative `content` and specify the `maxLength` of the UI text (after which, truncation will occur).
18+
19+
Additionally you can pass in a `tooltipPosition` to control the position of the tooltip, and `tooltipMaxWidth` to control the tooltip width.
1820

1921
```js file="./LongTextTooltipExample.tsx"
2022

packages/module/src/LongTextTooltip/LongTextTooltip.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const LongTextTooltip: React.FC<LongTextTooltipProps> = ({
1919
tooltipPosition = TooltipPosition.top,
2020
...rest
2121
}: LongTextTooltipProps) => {
22-
const truncate = (str: string, max: number) => (str.length > max ? str.substr(0, max - 1) + '…' : str);
22+
const truncate = (str: string, max: number) => (str.length > max ? str.substring(0, max - 1) + '…' : str);
2323

2424
return content.length > maxLength ? (
2525
<Tooltip maxWidth={tooltipMaxWidth} position={tooltipPosition} content={<div>{content}</div>} {...rest}>

0 commit comments

Comments
 (0)