Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -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"

Expand Down
2 changes: 1 addition & 1 deletion packages/module/src/LongTextTooltip/LongTextTooltip.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
Expand Down