Styling of popup in Grid | Infragistics Forums

Styling of popup in Grid

Tom Miller posted over 5 years ago

I am using the grid like the below example with a popup which shows additional emails.

what i am wondering is there a way to style this popup to make font and box bigger as well as place a hyperlink
on each item in list so i can trigger an event based on the clicked link ?

1740

Offline Aleksandar Kamenov posted over 5 years ago in reply to Tom Miller

Hello Tom,

Could you please clarify which components you are using.

I'm assuming that you are using Angularjs wrappers. Am i right?

It will be great if you can send me an isolated working sample in order to be able to work directly on it.

I have created a sample for you which is showing how you could proceed with the manipulation of the tooltip by subscribing for tooltipShown event and using one of the two classes that are proposed from the API documentation: ui-iggrid-tooltip-content.

You can see the example below and try to use the same API that the documentation suggests.

If you have further questions or struggles with the sample please notify me.grid-tooltip-modification.zip
Cancel
Reply

Cancel

Offline Tom Miller posted over 5 years ago in reply to Aleksandar Kamenov

Here is what i tried prior to your post with no luck, maybe you can tell me why its not working or whats missing

Here is how i set up the tooltip when i setup columns

 {
                headerName: 'Email',
                field: 'emails',
                width: 150,
                sortable: false,
                cellRendererFramework: MultiKeyValueItemRendererComponent,
                cellRendererParams: {
                    field: 'emails',
                },
                tooltip: function (params) {
                    return EmailsTooltipRenderer(params);
                },
            }

Then here is the function which i call to get the data for tooltip

export function EmailsTooltipRenderer (params) {
    let tooltipHtml = ``;
    const values = <IServerDropdownOption[]>params.value;
    if (values && values.length) {
        values.forEach((value, i) => {
            tooltipHtml += `${value.value} ${value.name ? '(' + value.name + ')' : ''}`;
            if (i !== (values.length - 1)) {
                tooltipHtml += `\n`;
            }
        });
    }

    return tooltipHtml;
}

And here is the 2 Styles i tried which neither works

.custom-tooltip {
    position: absolute;
    width: 150px;
    height: 70px;
    border: 1px solid cornflowerblue;
    overflow: hidden;
    pointer-events: none;
    transition: opacity 1s;
}

#tooltip {
    position: absolute;
    width: 150px;
    height: 70px;
    border: 1px solid cornflowerblue;
    overflow: hidden;
    pointer-events: none;
    transition: opacity 1s;
}

Maybe you can see what i am missing or whats wrong

1740

Offline Aleksandar Kamenov posted over 5 years ago

Hello Tom,

If I'm not mistaken, you are talking about the tooltip directive?

With the risk not to be right, I have made you a sample which is showing how you could implement a custom tooltip and style it.

Also, you can find the API documentation which perfectly describe and show some examples and functionalities that the tooltip directive provides.

I'm looking forward for your feedback.
Cancel
Reply

Cancel