Skip to Content (Press Enter)
2020-09-10 09-11-19
J u n i o r
792Views
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
07 Dec 2020
Copy Link
2018-10-29 08-31-03
João Marques
 
MVP

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
07 Dec 2020
Copy Link
2020-08-31 05-04-40
Rahul Jain

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
07 Dec 2020
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.