Formatted text in Tooltip

[charleneyjh1]

Hello team,

does tooltip only support unformatted text, or it also supports new lines and bullet points? Trying to implement this in the tooltip, is it feasiable?

[dosubot[bot]]

Hey there @charleneyjh1, nice to see you back! 🚀 Remember that time we tackled that quirky bug together? Good times. Anyway, I'm diving into your tooltip formatting question now, and I'll have some insights for you shortly. Stay tuned!

[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, I don't know how to help with that.

I did do a search though, 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:

• Tooltips + Icons (updated: 08/30/2022, similarity score: 85%)
• Text Formatting - Code Block (updated: 11/22/2022, similarity score: 85%)
• Tooltip text for user name (updated: 02/27/2024, similarity score: 85%)

[dosubot[bot]]

To implement formatted text in a tooltip that supports new lines and bullet points, you can use the text prop of the Tooltip component to pass JSX instead of a string. This allows you to include HTML elements such as <br /> for line breaks and <ul>/<li> for bullet points. However, the current version of the Tooltip component from Twilio Paste you're using might only accept a string for the text prop. To overcome this, you can utilize the children prop of the Tooltip to render custom formatted content.

Here's how you can modify your TooltipPreview component to include a tooltip with new lines and bullet points:

import { Button } from "@twilio-paste/core/button";
import { Tooltip } from "@twilio-paste/core/tooltip";
import { Box } from "@twilio-paste/core/box"; // Import Box for layout
import * as React from "react";

const TooltipPreview = (): JSX.Element => {
  // Custom tooltip content with formatting
  const customTooltipContent = (
    <Box as="div">
      <p>Event Trigger Conditions:</p>
      <ul>
        <li>User clicks button</li>
        <li>User submits form<br />(New submissions only)</li>
        <li>Page loaded</li>
      </ul>
      <p>Add new event triggers in the settings.</p>
    </Box>
  );

  return (
    <Tooltip placement="right" text="">
      <Button variant="primary">Open tooltip</Button>
      {customTooltipContent} {/* Render custom content inside Tooltip */}
    </Tooltip>
  );
};

export { TooltipPreview };

In this example, I've introduced the Box component from @twilio-paste/core/box for layout purposes, allowing us to structure the tooltip content more flexibly. The customTooltipContent variable holds the JSX for the formatted text, including paragraphs, bullet points, and line breaks.

Please note, if the Tooltip component's API in your version of Twilio Paste strictly requires using the text prop for tooltip content and does not support JSX or HTML content directly, you might need to look for alternative ways to achieve the desired formatting, such as using a custom tooltip component or exploring other components in the Twilio Paste library that support rich text content.

If you need to extend or modify the Tooltip component in the Paste repository to support JSX or HTML content directly in the text prop, you can do so with a custom implementation. Here's a conceptual example of how you might implement a wrapper component to support JSX content:

import React from 'react';
import { Tooltip as OriginalTooltip, TooltipProps } from '@twilio-paste/tooltip'; // Assuming this is the correct import path

interface ExtendedTooltipProps extends Omit<TooltipProps, 'text'> {
  content: React.ReactNode;
}

const ExtendedTooltip: React.FC<ExtendedTooltipProps> = ({ content, ...props }) => {
  // Use a ref to store the content in a DOM element
  const contentRef = React.useRef<HTMLDivElement | null>(null);

  React.useEffect(() => {
    if (contentRef.current) {
      contentRef.current.innerHTML = '';
      React.render(content, contentRef.current);
    }
  }, [content]);

  return (
    <OriginalTooltip {...props} text="">
      <div ref={contentRef} />
      {props.children}
    </OriginalTooltip>
  );
};

export default ExtendedTooltip;

In this example, ExtendedTooltip is a wrapper around the original Tooltip component. It accepts a content prop, which can be any React node (JSX or HTML). The content is then rendered inside a div that is managed by the component, effectively allowing you to display more complex content within the tooltip.

Please note, this example is conceptual and might need adjustments to work with the actual implementation details of the Paste Tooltip component. Additionally, directly manipulating the DOM and rendering content like this can lead to security risks such as XSS (Cross-Site Scripting) if the content is not properly sanitized. Always ensure that any dynamic content rendered into the DOM is safe to display.

Sources

• packages/paste-theme-designer/components/preview/TooltipPreview.tsx
• packages/paste-core/components/tooltip/src/Tooltip.tsx
• packages/paste-core/components/tooltip/stories/index.stories.tsx

About Dosu

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.

[TheSisb]

Hi @charleneyjh1,

The Paste Tooltip does not support formatted text. Only a single string can be provided. Tooltip text is intended to be short and clarifying. You may want to either consider a Popover or some other visual treatment, like having it on the page directly.

[charleneyjh1]

Thanks for confirming @TheSisb!
IMO having formatted text make the tooltip content easier to read, and it doesn't conflict with it being short and clarifying. I don't need any interactive content in the the popover, so it feels a bit heavy and overkilled. Having it directly on the page doesn't make sense because it belongs to a cell in a table, and displaying them all would needs several rows.

when you said The Paste Tooltip does not support formatted text, do you mean it doesn't support it out of the box, or the suggested workaround by the bot doesn't actually work?

[nkrantz]

Hey @charleneyjh1! Can you explain why using a Popover for this use case feels like overkill? We recommend Popovers instead of Tooltips when you need any additional content beyond a simple string. Here's an example CodeSandbox of an information icon alone as the PopoverButton so you can get a feel of how it would look.

I don't see a Figma link so I'm not totally sure, but in your screenshot it seems as though your Tooltip is placed on a non-interactive element (the word "Identify"). If that's the case, please take a look at our Tooltip docs (especially the accessibility section). Tooltips (and Popovers, for that matter) should only be placed on interactive elements - otherwise they won't be accessible by keyboard users and other types of AT, or by anyone who doesn't happen to hover over that text.

[charleneyjh1]

I see. I thought a cell in a data grid is focusable. Thanks for the catch!
Popver is powerful and supports interactive elements and requires user to click on it, and an extra click to exit. Tooltip requires a lighter interaction. For my case, since i'm not including any interactive elements in it, just formatted string. It does feel a bit overkill IMO. However if that's the pattern we use across the app, i'll adhere to the guideline.
What pattern do we usually use for text overflow?

[nkrantz]

Got it! I couldn't tell from the screenshot that it was a Data Grid. The info still seems a little hidden (how would the user know to hover over that exact cell to see the text?) so I'd still recommend putting it in a Popover with the PopoverButton being an Information Icon like I showed in the CodeSandbox above.

That being said, you're the one who knows the most about the product and the user, and it's totally your call to make the most informed design decision! If you decide to go with the Tooltip, your engineer will need to build a custom component from our Tooltip Primitive.

What pattern do we usually use for text overflow?

Are you looking for something beyond the Truncation component?