Tooltip Gets Cutoff in Grid

[Matias Galante]

Hello,

I’m dynamically adding a tooltip using the template property here since the order of the grid can change:

const data = settings.row.data;
if (data.status === ‘Ok’) {
settings.template = `
<div><smart-tooltip
position=”left”
selector=”status-${settings.row.id}”
delay=”0″>Ok</smart-tooltip>
<span id=”status-${settings.row.id}” class=”material-symbols-outlined”>done</span></div>`;
settings.cell.color = ‘green’;
} else {
settings.template = `<div><smart-tooltip
position=”left”
selector=”status-${settings.row.id}”
delay=”0″>Missing Required Item</smart-tooltip>
<span id=”status-${settings.row.id}” class=”material-symbols-outlined”>error</span>`;
settings.cell.color = ‘red’;
}

When the tooltip for error shows, since it has longer text, it gets cutoff on the right side. At first I wondered if it was because of the adjacent div but if I change the position to “left” it also gets cutoff by it’s sibling cell. I’m using Angular.

• This topic was modified 8 months, 1 week ago by Matias Galante.
• This topic was modified 8 months, 1 week ago by Matias Galante.
• This topic was modified 8 months, 1 week ago by Matias Galante.

[svetoslav_borislavov]

Hi,

You may try adding the tooltips to the body, this way:
https://codepen.io/svetoslavb04/pen/oNJjZYG

I hope this helps!

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

[Author]

Posts