Dynamic tooltip for image cell

[Seth]

I have a Grid control that has a column populated with a "thumbnail-sized" image:

                <GridColumn Field="@nameof(QuoteSheetDetailFactory.InlineImageUrl)" IsFrozen="true" HeaderText="Image" TextAlign="TextAlign.Center" Width="140" MaxWidth="140" AllowEditing="false" AllowFiltering="false" AllowSorting="false">

                    <Template>

                        @{

                            var row = (context as QuoteSheetDetailFactory);

                            <div class="image">

                                <img src="@($"{row.InlineImageUrl}?{SasToken}")" @onclick="(() => ViewImages(row))" />

                            </div>

                        }

                    </Template>

                </GridColumn>

All good there.  What I'd like to do is have a larger version of the image made available when the user hovers over one of the images.  Is this possible?

[Sarveswaran Palani]

Hi Seth,

Greetings from Syncfusion.

Query: What I'd like to do is have a larger version of the image made available when the user hovers over one of the images.  Is this possible?

Yes, it is possible, you may achieve this requirement using SfTooltip component within the Grid column template feature. We have prepared sample based on your requirement. Kindly refer the attached sample and code snippet for your reference.

<GridColumn Field="Imagesrc" TextAlign="TextAlign.Center" HeaderText="Sample Image">

    <Template>

        @{

            var imageUrl = (context as Order).Imagesrc;

            count++;

            <SfTooltip @key="@count" Position="Position.BottomCenter">

                <ContentTemplate>

                    <img style="width:150px; height:75px;" src="@imageUrl" />

                </ContentTemplate>

                <ChildContent>

                    <span><img style="width:75px; height:75px;" src="@imageUrl" /></span>

                </ChildContent>

            </SfTooltip>

        }

    </Template>

</GridColumn>

If you have any further queries, please get back to us.

Regards,
Sarvesh

Attachment: SfGridTooltip_657336d5.zip