How to alter tooltip size as per the content automatically in reactive web apps

I have to apply tooltip in various pages in reactive web, so instead of changing css for every tooltip, is there any way by which the tooltip text will get adjusted automatically according to text?

Hello!! @Aditya Chinchole , can you share why you are saying that the tooltip is not adjusted automatically?

For example, i have an example of the tooltip, that is adjusting my content, and I am using OutSystems UI


Márcio C.

This is the issue, u can notice that the width remains same for long messages, which doesn't look good to the user. I am looking for automatic width management as per content @Marcio Carvalho 

As you can see, it as a min width,

 if you put the width 100%

it will be 100% through the screen

So, what you can do is, create a block called custom tooltip where you can put in a static/dynamic way the width you want on that screen!! :)


Hi Aditya Chinchole,

Please have a look, Tooltip is adjusting as per the content. have a look attached oml as well.

let me know which control you are using ?




Hello @Vani Mankad can you please put the screen as anonymous?


Márcio C.

Done - Please download now and check for refrence.

Thank you :)

The width is not changing for long messages. It won't adjust that text in one line. that is what I want @Vani Mankad 


Hi Aditya,

For the mentioned use-case, you can try to override the pre-defined tooltip-wrapper style class (or chain a custom class) with the below-mentioned CSS class defintion.

.tooltip-wrapper {
    min-width: max-content;

See this sample screen

Hope this helps you!

Kind regards,

Benjith Sam

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.