Need to set the tooltip width and change the background color

Back to Forums

Chethan Gowda C

Solved

Question

Reactive

OutSystems Widgets

Hi,

I am trying to set the width and background color for the tooltip by using css, extended class and all the available options by referring to the previous posts. But I am still unable to achieve this. Can anyone help me me with this?

Regards,

Chethan

14 Feb 2023

Krishnanand Pathak

Solution

Replying to Chethan Gowda C's comment on 14 Feb 2023 07:31:30

.osui-tooltip__balloon-wrapper__balloon {
background-color: aqua;
}

.osui-tooltip__balloon-wrapper.right .osui-tooltip__balloon-wrapper__balloon::before {
border-color: transparent aqua transparent transparent;
}

.osui-tooltip__balloon-wrapper__balloon {
min-width: 500px;
min-height: 80px;
}

Try the above CSS to your Screen.
And customize it based on your requirement.

See solution in context

14 Feb 2023

Krishnanand Pathak

Hi @Chethan Gowda C

Please check the below thread. This is related to tooltip styling.

https://www.outsystems.com/forums/discussion/67603/add-tooltip-border-and-border-color/#

Regards

Krishnanand Pathak

14 Feb 2023

3 replies

Last reply 14 Feb 2023

Show thread

Hide thread

Chethan Gowda C

Hi Krishnanand Pathak ,

I already tried this one but it didn't work for me.

14 Feb 2023

Krishnanand Pathak

Solution

Replying to Chethan Gowda C's comment on 14 Feb 2023 07:31:30

Try the above CSS to your Screen.
And customize it based on your requirement.

14 Feb 2023

Chethan Gowda C

Replying to Krishnanand Pathak's comment on 14 Feb 2023 08:05:04

Hi Krishnanand Pathak ,

It is working, Thank you so much for your help.

14 Feb 2023

Tousif Khan

Champion

Hello

If you want it custom and you don't want to Overide any other Tooltip Css.
You can do that by adding Extended class.
I am attaching Css And Sample Hope that will help
https://personal-ejuytnht.outsystemscloud.com/TooltipSample/TooltipSample?_ts=638119814757054538

.TooltipCust .osui-tooltip__balloon-wrapper.right .osui-tooltip__balloon-wrapper__balloon:before{
border-color: transparent #fc0000 transparent transparent !important;
}
.TooltipCust .osui-tooltip__balloon-wrapper__balloon{
background-color: #fc0000 !important;
}

I hope this helps

Thanks
Tousif Khan

TooltipSample_.oml

14 Feb 2023

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

See the full guidelines