[OutSystemsUIWeb] Tooltip Appearing Far From UI Element
Application Type
Traditional Web

Hi,

I have used the ToolTip Element exactly as shown in the docs found here: Tooltip Doc

I am using the tooltip inside the cell of an "Editable Table" in Traditional Web. The tooltip is popping up very, very far off from where the element I am using it on is situated on the screen as seen below (mouse is hovered on "ingeniumml")

Is there some compatibility issue with the editable table and the tooltip UI elements? Is there an alternative method I can use to implement tooltips in the editable table widget? Does anyone know any additional css / javascript properties that I can use to alleviate this problem with the tooltip element? Any help at all is appreciated. Thanks.

Hello Justin Papin,

I think to found a solution, try here:

https://personal-gxzlvs5j.outsystemscloud.com/TableWithTooltip/Employees.aspx

What I have done is add some CSS to override the ones from Outsytems:

.EditableTable {
    transform: none;
    transform-style: unset;
    perspective: unset;
}

.EditableTable td {
    background-color: var(--color-neutral-0);
    border-bottom: 1px solid var(--color-neutral-4);
    height: 56px;
    padding: var(--space-s) var(--space-m);
    text-align: left;
    -webkit-transition: all 180ms linear !important;
    transition: all 180ms linear;
}

Hope it helps.

Best Regards,

Nuno R

Hi @Nuno Ricardo Rodrigues 

Thanks for your response, what element did you add this CSS to? The ToolTip module? or the editable table?

The behavior in your demo is exactly what I want.

Thanks a lot @Nuno Ricardo Rodrigues 

Your solution works when I put this CSS properties in a class and assign it to the ToolTip module. I had to make some small additions to the style sheet that you shared however. This is because I am using a "Combo Box" inside of the cell and not just regular text. 

The additions were made to hide the borders of the "Combo Box" when the row is unselected (expected behavior)

Below, I have put "**" behind the elements that I have added.


.EditableTable {
    transform: none;
    transform-style: unset;
    perspective: unset;
    **border: none;
}

.EditableTable td {
    background-color: var(--color-neutral-0);
    border-bottom: 1px solid var(--color-neutral-4);
    height: 56px;
    padding: var(--space-s) var(--space-m);
    text-align: left;
    -webkit-transition: all 180ms linear !important;
    transition: all 180ms linear;
}

**.EditableTable:hover {
    background: none;
}

Thanks again!! And also to all who made an attempt to help me.

Hello @Justin Papin 

In my personal environment, I have updated the OutSystems UI Web to version 1.8.14 and this is how the tooltip displays inside an Editable Table cell. 

It is not as bad as your scenario. So as a first step please check to see if maybe you need to upgrade OutSystems UI Web?

Regards,

AJ

Thanks @A J ,

I will try updating OutSystems UI Web and see if it helps, will post the result here when I do.

I have updated to the latest version of OutSystems UI Web and I've experienced no changes. I'm going to see if I have any rogue CSS that is causing the tooltip to appear far below where its expected to be. I am also looking into using CSS to move the tooltip upwards when it's on the screen to kind of "hide" the problem. Will post my findings.

Hello Justin Papin,

I think to found a solution, try here:

https://personal-gxzlvs5j.outsystemscloud.com/TableWithTooltip/Employees.aspx

What I have done is add some CSS to override the ones from Outsytems:

.EditableTable {
    transform: none;
    transform-style: unset;
    perspective: unset;
}

.EditableTable td {
    background-color: var(--color-neutral-0);
    border-bottom: 1px solid var(--color-neutral-4);
    height: 56px;
    padding: var(--space-s) var(--space-m);
    text-align: left;
    -webkit-transition: all 180ms linear !important;
    transition: all 180ms linear;
}

Hope it helps.

Best Regards,

Nuno R

Hi @Nuno Ricardo Rodrigues 

Thanks for your response, what element did you add this CSS to? The ToolTip module? or the editable table?

The behavior in your demo is exactly what I want.

Thanks a lot @Nuno Ricardo Rodrigues 

Your solution works when I put this CSS properties in a class and assign it to the ToolTip module. I had to make some small additions to the style sheet that you shared however. This is because I am using a "Combo Box" inside of the cell and not just regular text. 

The additions were made to hide the borders of the "Combo Box" when the row is unselected (expected behavior)

Below, I have put "**" behind the elements that I have added.


.EditableTable {
    transform: none;
    transform-style: unset;
    perspective: unset;
    **border: none;
}

.EditableTable td {
    background-color: var(--color-neutral-0);
    border-bottom: 1px solid var(--color-neutral-4);
    height: 56px;
    padding: var(--space-s) var(--space-m);
    text-align: left;
    -webkit-transition: all 180ms linear !important;
    transition: all 180ms linear;
}

**.EditableTable:hover {
    background: none;
}

Thanks again!! And also to all who made an attempt to help me.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.