Add Support for Custom Tooltip to View the Original Text

[sohamnandi77]

First, I want to express my gratitude for your continued efforts in maintaining the react-truncate library. Your work is greatly appreciated by the community.

I would like to propose an enhancement to the library: adding support for a custom tooltip to view the original, untruncated text. This feature would allow users to easily see the full content without the need to expand the text manually.

[chengpeiquan]

Thank you for your suggestion on this project! Can the Tooltip component provided by the UI framework be used to meet this requirement? e.g. Tooltip - Shadcn UI .

export function TooltipDemo() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger>
          {truncatedText}
        </TooltipTrigger>

        <TooltipContent>
          {originalText}
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  )
}

If I understand it wrongly, I need more introduction of ideas. Thx!

[sohamnandi77]

yes, This works, as of now, I am using this only.

But it would be good it would have been inbuild, as nowhere original text is displayed in the dom. it would be good if we somehow display it in dom with some aria-* or "data-original" tag which would be good in terms of accessiblity.

[chengpeiquan]

Thanks for this great idea. I will evaluate whether to provide built-in implementation in next version updates or just provide documentation as an example.

[chengpeiquan]

Hi, considering that different projects will use different UI frameworks, I only provide an introduction to usage in the document.

There is now a demonstration area in the documentation for advanced usage, including the Tooltip scenario mentioned in this discussion, see:
https://truncate.js.org/reference/show-more/#advanced-usage

Thanks again for this excellent advice!