Merge pull request #44 from dlabaj/longtexttooltip

fix(longtexttooltip): Updated with additional review comments.
patternfly · Oct 3, 2023 · 333dbc1 · 333dbc1
2 parents b62f671 + e2a28bd
commit 333dbc1
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 5 deletions.
diff --git a/...content/extensions/component-groups/examples/LongTextTooltip/LongTextTooltip.md b/...content/extensions/component-groups/examples/LongTextTooltip/LongTextTooltip.md
@@ -1,20 +1,22 @@
 ---
 section: extensions
 subsection: Component groups
-id: Long text tooltip
+id: Long-text tooltip
 source: react
 propComponents: ['LongTextTooltip']
 ---
 
 import LongTextTooltip from "@patternfly/react-component-groups/dist/dynamic/LongTextTooltip";
 
-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.
+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. 
 
 ## Examples
 
-### LongTextTooltip component
+### Basic long-text tooltip
 
-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.
+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).  
+
+Additionally you can pass in a `tooltipPosition` to control the position of the tooltip, and `tooltipMaxWidth` to control the tooltip width.
 
 ```js file="./LongTextTooltipExample.tsx"
 

diff --git a/packages/module/src/LongTextTooltip/LongTextTooltip.tsx b/packages/module/src/LongTextTooltip/LongTextTooltip.tsx
@@ -19,7 +19,7 @@ const LongTextTooltip: React.FC<LongTextTooltipProps> = ({
   tooltipPosition = TooltipPosition.top,
   ...rest
 }: LongTextTooltipProps) => {
-  const truncate = (str: string, max: number) => (str.length > max ? str.substr(0, max - 1) + '…' : str);
+  const truncate = (str: string, max: number) => (str.length > max ? str.substring(0, max - 1) + '…' : str);
 
   return content.length > maxLength ? (
     <Tooltip maxWidth={tooltipMaxWidth} position={tooltipPosition} content={<div>{content}</div>} {...rest}>