Alternative of OverflowMode (TooltipHost in Fluentv8) in Tooltip component of Fluentv9?

[aposingh1234]

I want the tooltip component (fluentv9) to show up on hover, only when the text inside it is truncated. For Fluentv8's TooltipHost, there was a property called OverflowMode which handled the same. What's the corresponding alternative for it in Fluentv9's Tooltip?

[ValentinaKozlova]

@behowell, @khmakoto, could you please add your input on this discussion?
From what I know about this component, the user should handle truncation logic. I used this component in the Breadcrumb and I handle truncation myself. The philosophy behind V9 is that users have more freedom by applying composition. But with this approach they, also, got more things to handle themselves.
That's how it can be done:

{
isTruncated ? (
        <Tooltip withArrow content={someContent} relationship="label">
          <SomeComponent>{truncatedContent}</SomeComponent>
        </Tooltip>
      ) : (
        <SomeComponent>{someContent}</SomeComponent>
      )}

I don't think that truncation logic should be in the Tooltip because partners might use it differently.

@behowell, @khmakoto, correct me if I'm wrong.

[behowell]

Hi @aposingh1234, the v9 Tooltip doesn't have this functionality built in because of accessibility concerns. The tooltip in this case isn't accessible to touch or keyboard users (assuming the text is not focusable), which makes the full text content only available to mouse users. You might consider other options to show the text, such as a button to expand the container.

That said, if you wanted to implement a tooltip that only showed when the text was truncated, it would be best to control the visible property of the Tooltip. Your code would listen to the onVisibleChange event, and calculate the visible property based on whether the content is overflowing (compare clientWidth/clientHeight to scrollWidth/scrollHeight). Here's an example showing how to do that: https://codesandbox.io/s/quiet-lake-qrrywm?file=/example.tsx. The example used to be on the documentation site, but was removed because of the accessibility concerns above.

[Conditionally rendering the Tooltip as in @ValentinaKozlova's example would work, but it would require you to listen for layout changes and re-render when the layout changes, which can be more difficult and worse for perf.]