How can I change the width of a tooltip container in React?

Question

I am making a very simple React application where I am in the need to display a tooltip on hover over the text...

<OverlayTrigger
  placement="bottom"
  overlay={
    <Tooltip
      id="tooltip"
      style={{ width: "100%", wordBreak: "break-all" }}
    >
      thisisalongstringthanusualhencenotfilledincontiner
    </Tooltip>
  }
>
  <span>Hover over this text</span>
</OverlayTrigger>

Before I had the problem of making the tooltip content fit into container, so I have used wordBreak: "break-all", so it fits into the container box.

A working example is here...

But now I got the requirement that the tooltip should display horizontally long. Now you can see it is making word breaks and the container is vertical with a fixed width... But how can I change the width of the tooltip container to make the text horizontally long in a single line?

From the above code, the text thisisalongstringthanusualhencenotfilledincontiner should be displayed in a single line with the tooltip expanded...

How can I change the width of the tooltip container in react bootstrap?

Margitmargo

you want to width auto on single word whatever it will be long? – Galway

@Kumar, In my real application it will be a token which consists of around 250 continuous characters, so I want to display the entire string in a single line no matter how long the text is.. It should be displayed only in a single line like thisisalongstringthanusualhencenotfilledincontiner .. – Margitmargo

Answer 1

<Tooltip className="mytooltip" ...>

CSS

.mytooltip > .tooltip-inner {
  max-width: 100%;
}

.mytooltip > .tooltip-arrow {
  ...
}

Pickett

This is the correct solution but If still not working you can try adding the css in index.css file. – Stonedeaf

Answer 2

Add this CSS property in the below class.

.tooltip-inner {
    max-width: none;
}

Livvyy

This was the key for me. – Gallego

Answer 3

my way to solve this issue was to assign the --bs-tooltip-max-width css variable to the max width i need like so

const style = {
   '--bs-tooltip-max-width': '300px', ...props.style
};
// and then
<Tooltip {...props} style={style} >
...
</Tooltip >

     

Waist

Answer 4

You can add this CSS content:

.tooltip .tooltip-inner {
  width: 7em;
  white-space: normal;
}

If you inspect it, you'll see the tooltip is placed after the item it's referencing, by default. So you can target it with CSS for widths and stuff.

Galway