React-tooltip: Set MaxWidth on Tooltip

[kristinadarroch]

It doesn't seem like there is a way to set the maxWidth on the tooltip. When given a long text block i need to tooltip have a set maxWidth so that it doesn't overflow the entire screen

[0xdavinchee]

https://wwayne.github.io/react-tooltip/
Check out the examples with className, you can just create a class with max-width set and then do:
<ReactToolTip className="my-custom-class">hello world</ReactTooltip>

[mikechabot]

Edit:

Add to your container class, along with max-width:

{
   white-space: pre-wrap;
   overflow: hidden;
}

---

A simple class does not seem to be effective:

React

<p data-tip="tooltip">
   <Icon iconName="tool-tip" />
</p>
<ReactTooltip className="adp-tooltip--component"}>
   This is some very long text this is not going to get cut off with just a simple classname on the wrapper.
</ReactTooltip>

CSS

.adp-tooltip--component {
   text-transform: none;
   max-width: 200px;
}

[0xdavinchee]

Edit:

Add to your container class, along with max-width:

{
   white-space: pre-wrap;
   overflow: hidden;
}

A simple class does not seem to be effective:

React

<p data-tip="tooltip">
   <Icon iconName="tool-tip" />
</p>
<ReactTooltip className="adp-tooltip--component"}>
   This is some very long text this is not going to get cut off with just a simple classname on the wrapper.
</ReactTooltip>

CSS

.adp-tooltip--component {
   text-transform: none;
   max-width: 200px;
}

That's interesting, the max-width seems to be sufficient for my usage, but I am also placing the text in the tooltip within <p> tags. Nonetheless, if my solution doesn't work give @mikechabot's solution a try. :)