Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

TooltipDefinition no longer supports Nodes for tooltipText prop

See original GitHub issue

What package(s) are you using?

carbon-components
carbon-components-react

Detailed description

Describe in detail the issue you’re having.

The TooltipDefinition component no longer supports Node objects for the tooltipText prop. It now only supports strings. This is a breaking change within major version 10. It came in here: https://github.com/carbon-design-system/carbon/commit/2571ed5051a45a335796365fe09f74e419d07192#diff-916183444c3885c676548407d734df75R74

We were using the Node structure to allow multiple DOM nodes within the tooltip, so we could apply alignment and styling to the text. This is no longer possible with only being able to supply strings.

For example, this is how we used TooltipDefinition’s support of Node objects in the tooltipText prop previously:

Note the bold formatting, and alignment of the tooltip text content.

Is this issue related to a specific component?

TooltipDefinition

What did you expect to happen? What happened instead? What would you like to see changed?

I expected continued support of PropTypes.Node for the tooltipText prop.

What browser are you working in?

Chrome

What version of the Carbon Design System are you using?

carbon-components: 10.4.1 carbon-components-react: 7.4.1

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

IBM Cloud Identity

Steps to reproduce the issue

Render a TooltipDefinition using a Node object for the tooltipText prop instead of a string.

Please create a reduced test case in CodeSandbox

Style and vanilla JS: https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/components/examples/codesandbox

React: https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/react/examples/codesandbox

Additional information

Screenshots or code
Notes

Issue Analytics

State:
Created 4 years ago
Comments:15 (12 by maintainers)

Top GitHub Comments

1reaction

emyarodcommented, Jul 17, 2019

@asudoh IIRC the move from node to string is in line with the recommended use case for definition tooltips as @elizabethsjudd pointed out. that being said I believe we can reimplement support for nodes in tooltipText for the time being and flesh out migration paths to interactive tooltip for this kind of use case

0reactions

emyarodcommented, Aug 15, 2019

I think we can address this after https://github.com/carbon-design-system/carbon/pull/3739 is merged in

the current React tooltips don’t include the latest spec changes, but this can be more easily resolved once the two versions are consistent with each other

Top Results From Across the Web

TreeNode.ToolTipText Property (System.Windows.Forms)

Gets or sets the text that appears when the mouse pointer hovers over a TreeNode.

TooltipDefinition - Carbon Components Svelte

Customize the tooltip menu direction and alignment through the direction and align props. By default, direction is "bottom" and align is "center" ....

Different tooltip content per each level of Force Directed nodes

You can set what is displayed in a tooltip of ForceDirectedTree chart's nodes using its tooltipText property. However, the same information will be...

Tooltip Guidelines - Nielsen Norman Group

Additionally, lengthy content is no longer a 'tip', ... The McDonalds website did not support tooltips via keyboard triggers.

title - HTML: HyperText Markup Language - MDN Web Docs

Wikibooks has more on the topic of: HTML ... Browsers do not display the HTML tags but use them to interpret the content...