FlyweightTooltipTracker

import { FlyweightTooltipTracker } from 'cx/widgets';

FlyweightTooltipTracker is used to display tooltips by extracting information from the DOM. It’s useful for displaying full text on elements with text overflow, showing link URLs, or adding tooltips to headings.

This component uses the Flyweight pattern to efficiently handle tooltips for many elements without creating individual tooltip instances for each one.

 <div className="flex flex-col items-start gap-4">
  <div
    className="ellipsis overflow-hidden text-ellipsis whitespace-nowrap"
    style={{ width: "150px" }}
  >
    This is a long text that doesn't fit its designated space.
  </div>

  <a href="https://cxjs.io" target="_blank">
    Link to CxJS website
  </a>

  <FlyweightTooltipTracker
    onGetTooltip={(el) => {
      // Show full text for truncated elements
      if (
        el instanceof HTMLElement &&
        el.classList.contains("ellipsis") &&
        el.scrollWidth > el.clientWidth
      ) {
        return {
          title: "Full text",
          text: el.innerText,
        }
      }

      // Show URL for links
      if (el.tagName === "A" && el.getAttribute("href")?.startsWith("http")) {
        return {
          text: el.getAttribute("href")!,
          placement: "up",
        }
      }
    }}
  />
</div> 

This is a long text that doesn't fit its designated space.

Link to CxJS website

The onGetTooltip callback receives the DOM element under the mouse and should return a tooltip configuration object or undefined to skip showing a tooltip.

Configuration

Property	Type	Description
`onGetTooltip`	`function`	Callback that receives the hovered DOM element and returns tooltip config (`{ text, title, placement, ... }`) or `undefined`.