CODEWITHSUNDEEP
javascriptcssreactjstwitter-bootstrapreact-bootstrap
user12856847
user12856847

Reputation:

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

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?

Upvotes: 6

Views: 14327

Answers (4)

Hillel
Hillel

Reputation: 116

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 >

Upvotes: 2

Ram kumar
Ram kumar

Reputation: 3162

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.

Upvotes: 0

Mohammad Oftadeh
Mohammad Oftadeh

Reputation: 1449

<Tooltip className="mytooltip" ...>

CSS

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

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

Upvotes: 6

Akil Makda
Akil Makda

Reputation: 431

Add this CSS property in the below class.

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

Upvotes: 4

Related Questions