I would like to make my tooltips in my application wider, with a max-width of 500px instead of 250px.
I've used the following CSS to make this happen:
.osui-tooltip .osui-balloon { max-width: 500px; }
This does make the tooltip wider, however, if the tooltip is near the edge of the window, it no longer automatically moves the tooltip. Instead, it just cuts off the text at the edge of the window. See the example image below.
We've just recently done a platform upgrade to 11.32.0, and this problem didn't happen in the older version.
I'm hoping someone can provide some CSS classes or some other solution to increase the width of my tooltips.
Thanks in advance,
Gaius
Hi Gaius Augustus ,1.Ensure that the tooltip text wraps properly inside the container .osui-tooltip .osui-balloon {
max-width: 500px;
white-space: normal;
word-wrap: break-word
}2.Make Adjust tooltip dynamically
.osui-tooltip .osui-balloon {
word-wrap: break-word;
position: absolute !important;
left: auto !important;
right: auto !important;
}
3.tooltip container itself is being cut off ,It need to position dynamically,
overflow: visible !important;
transform: translate(-50%);
4.If the tooltip exceed the screen width ,Use this css
max-width: min(500px, calc(100vw - 20px));
2nd method-Or else you can try using JavaScriptdocument.querySelectorAll('.osui-tooltip .osui-balloon').forEach(tooltip => {
tooltip.addEventListener('mouseover', function () {
let rect = this.getBoundingClientRect();
if (rect.right > window.innerWidth) {
this.style.left = `${window.innerWidth - rect.width - 10}px`;
});
});Thanks,Sahana
Hey @Gaius Augustus ,
You can adjust the tooltip margins to ensure it fits within the screen. I implemented this dynamically using JavaScript, but you can also achieve it statically with CSS. Below is the JavaScript code I used: Adjust tooltip.
This is the result:
Hi Gaius,
Just apply
like this
before
after
also you can try changing its position
hope it helps.