J u n i o r
Rank: #12403
18Views
2Comments
How to change the background color of tooltip?
Question
Traditional Web
Application Type
Traditional Web
Service Studio Version
11.10.0 (Build 34711)

Hello All,

Currently I am trying to have a 'Info' notation placed beside my label in the form to tell the users probably what is the main difference between some options available in combobox. But how do I change the background color of the tooltip widget? I am using the 'Tooltip' widget from WebPatterns module.


I wish to have my tooltip background white in color unlike the current one, black background.

0
0
on 2020-12-07
Copy link to comment
João Marques
Rank: #68

Hi Junior,


Just place the following CSS in your theme:


.tippy-popper[x-placement^=right] .tippy-arrow {

   border-right-color: white;

}


.tippy-popper[x-placement^=left] .tippy-arrow {

   border-left-color: white;

}


.tippy-popper[x-placement^=top] .tippy-arrow {

   border-top-color: white;

}


.tippy-popper[x-placement^=bottom] .tippy-arrow {

   border-bottom-color: white;

}


.tippy-popper .tippy-content .tooltip,

.tippy-tooltip {

    color: black;

    background-color: white;

}


Hope it helps.


Regards,
João


0
0
on 2020-12-07
Copy link to comment
Rahul Jain
Rank: #1349

Hi ,

We can change background color and style by CSS

.tooltip
{
 background-color: red;
 color: white;

}

https://rahuljain877.outsystemscloud.com/Traditional/WebScreen1.aspx?_ts=637429460498291869


Regards

---RJ---

0
0
on 2020-12-07
Copy link to comment