Skip to Content (Press Enter)
2022-05-29 13-15-09
Valentyna Boiko
301Views
6Comments
Styling a tooltip
Question
RichWidgets
OutSystems UI
OutSystems Widgets

Hi all!

 I am trying to style a tooltip. Can someone help to reach the look I will attach with a photo? White background, little shadow behind.

Thank you.


tooltip.png
0
0
19 Jan 2023
Copy Link
2026-01-26 10-25-31
Lennart Kraak
Champion

Hi Valentyna,

That looks a lot like the Balloon widget that comes standard with OutSystems UI. See https://success.outsystems.com/Documentation/11/Developing_an_Application/Design_UI/Patterns/Using_Traditional_Web_Patterns/Content/Balloon

Isn't that what you are looking for? 

Regards, 

Lennart

0
0
19 Jan 2023
Copy Link
2025-10-18 11-13-53
Ramesh subramanian

Hi Valentyna Boiko,

Please find solution in below discussion related add tooltip border and border color ,

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

Hope it helps you.

Thanks,

Ramesh 


0
0
20 Jan 2023
Copy Link
2022-12-09 04-50-17
Shubham Doshi

Hello Valentyna,

1. Inspect the tooltip element in the browser as shown below. You will get the class of tooltip.

2. Copy and paste the entire class in the CSS editor:

3. Make the changes like I have done for background color which is red. Then the changes will reflect on the browser.


I have attached demo OML as well.

Hope it Helps :)

DemoToolTip.oml
0
0
20 Jan 2023
Copy Link
UserImage.jpg
Chow Wai Tin

Hi @Shubham Doshi ,

I have tried implementing this but the OutsystemsUI Theme overrides it.

0
0
25 Jan 2024
Copy Link
2024-08-06 11-20-33
Ronnie Verheij

Change the color var(--color-ramp-red) to the color you want to use.

.osui-tooltip__content{  cursor:pointer;  position:inherit;}.osui-tooltip__balloon-wrapper__balloon {    background-color: #fafafa;    color: black;    border-block-end: 1px;    border-block-start: 1px;      border-block-style: solid;                 border-block-color: var(--color-kramp-red);    padding: 5px;            border-radius: 10px;            display: block !important;    border-style: solid;    border-width: 2px;        padding-left: 10px;    padding-right: 10px;    padding-top: 5px;    padding-bottom: 5px;        border-color: var(--color-kramp-red);}.osui-tooltip__balloon-wrapper {    overflow:visible;}.osui-tooltip__balloon-wrapper.right .osui-tooltip__balloon-wrapper__balloon:before {  border-color: transparent var(--color-kramp-red) transparent transparent;  margin-left: -2px;            }.osui-tooltip__balloon-wrapper.left .osui-tooltip__balloon-wrapper__balloon:before {  border-color: transparent transparent transparent var(--color-kramp-red);  margin-left: 2px;            }.osui-tooltip__balloon-wrapper.bottom .osui-tooltip__balloon-wrapper__balloon:before, .osui-tooltip__balloon-wrapper.bottom-left .osui-tooltip__balloon-wrapper__balloon:before, .osui-tooltip__balloon-wrapper.bottom-right .osui-tooltip__balloon-wrapper__balloon:before {  border-color: transparent transparent var(--color-kramp-red) transparent;  margin-top: -2px;}.osui-tooltip__balloon-wrapper.top .osui-tooltip__balloon-wrapper__balloon:before, .osui-tooltip__balloon-wrapper.top-left .osui-tooltip__balloon-wrapper__balloon:before, .osui-tooltip__balloon-wrapper.top-right .osui-tooltip__balloon-wrapper__balloon:before{  border-color: var(--color-kramp-red) transparent transparent transparent;  margin-top: 2px;}

0
0
11 Jul 2024
Copy Link
2024-08-06 11-20-33
Ronnie Verheij

.osui-tooltip__content{

  cursor:pointer;

  position:inherit;

}


.osui-tooltip__balloon-wrapper__balloon {

    background-color: #fafafa;

    color: black;

    border-block-end: 1px;

    border-block-start: 1px;  

    border-block-style: solid;             

    border-block-color: var(--color-kramp-red);

    padding: 5px;        

    border-radius: 10px;        

    display: block !important;

    border-style: solid;

    border-width: 2px;    

    padding-left: 10px;

    padding-right: 10px;

    padding-top: 5px;

    padding-bottom: 5px;    

    border-color: var(--color-kramp-red);

}


.osui-tooltip__balloon-wrapper {

    overflow:visible;

}


.osui-tooltip__balloon-wrapper.right .osui-tooltip__balloon-wrapper__balloon:before {

  border-color: transparent var(--color-kramp-red) transparent transparent;

  margin-left: -2px;            

}


.osui-tooltip__balloon-wrapper.left .osui-tooltip__balloon-wrapper__balloon:before {

  border-color: transparent transparent transparent var(--color-kramp-red);

  margin-left: 2px;            

}


.osui-tooltip__balloon-wrapper.bottom .osui-tooltip__balloon-wrapper__balloon:before, .osui-tooltip__balloon-wrapper.bottom-left .osui-tooltip__balloon-wrapper__balloon:before, .osui-tooltip__balloon-wrapper.bottom-right .osui-tooltip__balloon-wrapper__balloon:before {

  border-color: transparent transparent var(--color-kramp-red) transparent;

  margin-top: -2px;

}


.osui-tooltip__balloon-wrapper.top .osui-tooltip__balloon-wrapper__balloon:before, .osui-tooltip__balloon-wrapper.top-left .osui-tooltip__balloon-wrapper__balloon:before, .osui-tooltip__balloon-wrapper.top-right .osui-tooltip__balloon-wrapper__balloon:before{

  border-color: var(--color-kramp-red) transparent transparent transparent;

  margin-top: 2px;

}


.popup-info-icon-color {

    color:var(--color-kramp-red)

}


0
0
11 Jul 2024
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.