Tooltip Text Wrapping

[brianhumphreys]

Hey folks, I am adding a feature that puts a tooltip on traits that have very long names. I was hoping that the tooltip could aid in showing the full name on hover. I have noticed that if there is no space in a word (such as a long trait name) it will overflow instead of wrap. Is there any way to get the text to wrap even with no space? This is a feature directly requested from Meta for Audience Analytics. They have very long trait names

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Sorry, but according to the Paste documentation, tooltips can only contain text content and should only contain information that provides additional context or guidance for the user. They are not designed to handle long, unbroken strings of text that do not fit within their container.

For long trait names, you might want to consider using the Truncate component. This component is designed to handle text or links that exceed the size of their container. It will cut off the text based on the parent container's width and append an ellipsis (...) at the end. However, please note that truncation can only happen on single lines of text and will never work on multiple lines.

Here's an example of how you might use the Truncate component:

import {Truncate} from '@twilio-paste/core/truncate';

<Truncate>VeryLongTraitNameThatExceedsTheSizeOfItsContainer</Truncate>

This will display the trait name up to the width of its container, followed by an ellipsis. When the user hovers over the truncated text, the full trait name will be displayed.

If you need to display the full trait name in a tooltip, you might need to implement a custom solution, as the Tooltip component in Paste is not designed to handle this use case.

I also did a search, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Truncate question (updated: 06/07/2023, similarity score: 84%)
• Text should have max width of size-30 (updated: 03/21/2023, similarity score: 83%)
• Tooltips + Icons (updated: 08/30/2022, similarity score: 82%)

[brianhumphreys]

we need a way to show long trait names regardless of what the documentation says. what is the general design guidance to do something like this?

[SiTaggart]

Hi

In this case, the suggestion made by PasteBot is probably the right path. It just misses one small detail from the Truncate component, which is the title attribute.

Tooltips can only be place on actionable, focusable elements in any UI. That is WCAG requirement for accessibility. They can't be placed on text, so they can't be used for showing the long strings, unless that long string is in a link, or a button. I'm not sure if that is the case here.

By using the Truncate component with the title attribute, you do get the full string on hover via the browser native API. It's not perfect, but it's not inaccessible.

Hopefully that solves for the case, if you're not using focusable elements.

Let us know

[brianhumphreys]

Are you saying that the truncate component should give me the ability to see the full text on hover? I don't see that in the docs and it is not giving me that behavior. I have this code:

<Box maxWidth="size30">
  <Text as="p">
    <Truncate title={text}>{text}</Truncate>
  </Text>
</Box>

and I am not getting hover for full text

Screen.Recording.2023-12-05.at.2.10.01.PM.mov

[SiTaggart]

Yes, that's correct. It's just the HTML title attribute.

It's not perfect for all situations.

The alternative is for the Designer to come to Office hours and discuss alternative design approaches that take into consideration accessibility and UI constraints.

[brianhumphreys]

I do not get that native browser functionality and I am using Chrome. It seems rather buggy and something we can not rely on. I am likely going to have to work around by using the tooltip and just breaking the string with spaces by calculating the width with each char. It's going to be ugly but this will likely be my solution unless there exists a better/reliable workaround

```function breakStringByPixelWidth(inputString, blockSize, font = '16px Arial') {
  // Create a temporary element for measuring text width
  const measureElement = document.createElement('span');
  measureElement.style.font = font;
  measureElement.style.visibility = 'hidden';
  document.body.appendChild(measureElement);

  let currentLine = '';
  let result = '';
  let i = 0;

  while (i < inputString.length) {
    const char = inputString[i];
    measureElement.textContent = currentLine + char;

    if (measureElement.offsetWidth > blockSize) {
      // If the current line exceeds the block size, break here
      result += currentLine.trim() + '\n';
      currentLine = '';
    } else {
      // Otherwise, add the character to the current line
      currentLine += char;
      i++;
    }
  }

  // Add the last line if there's any
  if (currentLine) {
    result += currentLine.trim();
  }

  // Clean up
  document.body.removeChild(measureElement);

  return result;
}

[brianhumphreys]

To me the best solution would be to treat underscores the same as hyphens and spaces.

Is there a reason that hyphens wrap but underscores overflow?