Show tooltip for filename and column header

[Ahmed Samy]

Hello Syncfusion Team,

In blazor syncfusion file manager, how can I show tooltip when hover on filename, and when hover on column header.

Please refer to image 

Note: the image is from syncfusion  vue.js filemanager component, but we are using blazor.

Thank you and Best regards,

Ahmed

[Ahmed Samy]

any updates ?

[LeoLavanya Dhanaraj]

Hi Ahmed,

Greetings from Syncfusion support.

We would like to inform you that we do not have direct support for displaying the built-in tooltip in FileManager columns and their headers. However, you can achieve this requirement using the native tooltip. Here, we have added the title attribute to the header and columns of the FileManager with the help of ColumnTemplate and HeaderTemplate support. Please refer to the code snippets and output screenshots provided below for further reference.

@using Syncfusion.Blazor.FileManager

 

<SfFileManager TValue="FileManagerDirectoryContent" View="ViewType.Details">

    <FileManagerAjaxSettings Url=https://ej2-aspcore-service.azurewebsites.net/api/FileManager/FileOperations

                             UploadUrl=https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Upload

                             DownloadUrl=https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Download

                             GetImageUrl=https://ej2-aspcore-service.azurewebsites.net/api/FileManager/GetImage>

    </FileManagerAjaxSettings>

    <FileManagerDetailsViewSettings>

        <FileManagerColumns>

            <FileManagerColumn Field="Name">

                <HeaderTemplate><span class="e-headertext" title="Name" >Name</span></HeaderTemplate>

                <Template>

                    @{

                        var data = (context as FileManagerDirectoryContent);

                        <div><span title="@data!.Name" class="e-fe-text">@data!.Name</span></div>

                    }

                </Template>

            </FileManagerColumn>

            <FileManagerColumn Field="Size" MinWidth="50" Width="110">

                <HeaderTemplate><span class="e-headertext" title="Size">Size</span></HeaderTemplate>

                <Template>

                    @{

                        var data = (context as FileManagerDirectoryContent);

                        <div><span title="@data!.Size" class="e-fe-text">@data!.Size</span></div>

                    }

                </Template>

            </FileManagerColumn>

        </FileManagerColumns>

    </FileManagerDetailsViewSettings>

</SfFileManager>

Output screenshots:

Tooltip for Header	Tooltip for columns

Also, refer the below documentation link for Details View column customizations.

https://blazor.syncfusion.com/documentation/file-manager/views#details-view

Regards,

Leo Lavanya Dhanaraj

[Ahmed Samy]

Hello  Leo Lavanya Dhanaraj,

Thank you it solved my issue.

Best regards,

Ahmed