@carbon/react 1.11.0 // ToolTip component not working

[urbanisierung]

Hi Carbon Team!

I'm trying to add a simple ToolTip to my application but unfortunately I cannot get it working. Furthermore the documentation is outdated. According to the docs it should work like

<Tooltip align="bottom" label={label}>
  <button className="sb-tooltip-trigger" type="button">
    <Information />
  </button>
</Tooltip>

But according to the source code it should be used the following way:

<Tooltip triggerText="Test Tooltip" direction="right">
  <p>This is some tooltip text.</p>
</Tooltip>

I've created a very simple codesandbox to demonstrate it: https://codesandbox.io/s/carbon-react-tooltip-s3lvno?file=/src/index.js

Am I using the component in a wrong way or is there a bug in the component?

Thanks!

[tw15egan]

Hey there @urbanisierung! Sorry for the inconvenience caused. The bottom source code may be coming from the v10 version; with v11 and the switch to @carbon/react, the documentation shows the correct usage. Here is a link to the v11 source, which now utilizes the Popover component.

t The Tooltip wraps an interactive element, in this case, a button. In our storybook, we've styled the button a little bit, which could be causing some confusion.

Here's a link to an updated CodeSandbox that hopefully helps illustrate the usage a little clearer: Code example.

Also of note, there is a ToggleTip component, which can be used when the tooltip content has interactive elements inside.

Let me know if that helps and if you have any more questions!

[urbanisierung]

Thanks @tw15egan for the quick response!

Can you please give me a simple example how to use the Tooltip around non-interactive elements? In my case I just want to show a Tooltip for a text like in this example: https://carbondesignsystem.com/components/tooltip/usage/#definition-tooltip-anatomy

[urbanisierung]

I guess I found it: should be a DefinitionTooltip then, right? https://react.carbondesignsystem.com/?path=/story/components-definitiontooltip--default

[tw15egan]

Sure thing, here is an example

In this case, you'd want to use the DefinitionTooltip