Question
American Express
US
Last activity: 9 Sep 2016 8:11 EDT
Tool Tip and Smart Info Control is not displaying properly
Hi TEAM,
We are facing some issue with tool tip control, we are able to see the tool tip displaced from the actual hover over property. Below i have attached the image of it, I have performing hover over on CVO property but the tool tip is displaying on the next property(MC). My requirement is to display on the same property (Arrow Should be on the same property). I have tried editing the control in the skin but this is not working for me,I have also used smart info basically it is depending on the size of the tool tip content. can any one help us in this issue.
Issue Screen Shot:
Regards,
Manoj
Accepted Solution
Pegasystems Inc.
IN
Hi Monoj,
By default smart tip box arrow will be display with a left position 30px on top of box. This is to allow rounded corners for the smart tip box. If we are not using rounded corners for the smart tip box, we can override left position to 3px which will show the arrow exactly on the hovered text. We can observe this issue with small length links similar in your use case. below is the css which will override the left position for smart tip arrow. you can add this in userwork form or any other custom css files which added to the skin in you application.
<style>
.smarttip-container .arrow.top, .smartInfoContainer .arrow.top {
left: 3px !important;
}
</style>
Please note that if you are adding this css in a css file, please remove style tags.
Thanks,
Hussain Vali.
Accepted Solution
Pegasystems Inc.
IN
Hi Monoj,
By default smart tip box arrow will be display with a left position 30px on top of box. This is to allow rounded corners for the smart tip box. If we are not using rounded corners for the smart tip box, we can override left position to 3px which will show the arrow exactly on the hovered text. We can observe this issue with small length links similar in your use case. below is the css which will override the left position for smart tip arrow. you can add this in userwork form or any other custom css files which added to the skin in you application.
<style>
.smarttip-container .arrow.top, .smartInfoContainer .arrow.top {
left: 3px !important;
}
</style>
Please note that if you are adding this css in a css file, please remove style tags.
Thanks,
Hussain Vali.
