Hi, would you be able to share a sample OML or some screenshots showing how the tooltip is displayed? Thanks.

This tooltip is in the first container, but after display it becomes as shown in the picture.

Because its width exceeds the width of the container that contains it.

 I want the arrow to be in the first container.

Thanks.

Hi @JerryTom,

Please try to use this CSS for tooltip.

.custom-tooltip {

  max-width: 250px;      /* Limit width */

  white-space: normal;   /* Allow wrapping */

  word-break: break-word; /* Break long words */

  z-index: 9999;         /* Keep it on top */

}

Hope this helps.

Thanks.

Hi,

You can override the 'tooltip-wrapper' style by increasing the min-width and max-width properties as needed. 

For example:

.tooltip-wrapper {

    min-width: 200px

    max-width: 200px

}

Thank you.

Hi @JerryTom 

I have attached oml file please check

1) Add the position if you needed anything 

2) Add custom class to Main container for tooltip style background color and etc. class "info-tooltip-bg"

.info-tooltip-bg .osui-tooltip__balloon-arrow {    

background: #012e5d;

}

.info-tooltip-bg .osui-tooltip__balloon-wrapper__balloon span { 

   font-size: 14px; 

   font-weight: 400;

}

.info-tooltip-bg .osui-tooltip .osui-balloon {    

background: #012e5d;

border-radius: 8px; 

 max-width: 250px;   

 padding: 12px;    

z-index: 99;    

box-shadow: 0px 2px 8px 1px #00000099;

}

I hope this help for you

Thanks

Hello,

Try this hope this helps-

Set overflow: visible on the container where the tooltip is placed:

Go to the container widget in Service Studio, open the Style Classes or Extended Properties, and apply a custom class. For example:

.tooltip-container {

  overflow: visible !important;

  position: relative; 

}

Then assign that class to your container.

Position the tooltip absolutely if you're using a custom tooltip or using something like Balloon:

.custom-tooltip {

  position: absolute;

  z-index: 1000;

  max-width: 300px; 

}

If you’re using OutSystems' built-in Tooltip pattern, make sure the tooltip is attached to an element not inside a container with overflow: hidden.

If needed, move the tooltip trigger outside such containers or apply overflow: visible to the right parent element.

Hi @JerryTom,

Set a Max Width and Wrap Text , Add this class to your tooltip container:

.tooltip-fix {

  max-width: 200px; /* or any fixed width */

  white-space: normal;

  word-break: break-word;

}

Thanks,