Display an Image inside a Kendo Tooltip does not work properly

[Niroj Kumar]

Hi,

I have been trying to display an image inside a Kendo Tooltip in MVC.

The image src is from web.

When I deploy my app in Azure and try to view the tooltip. It do not display the image, instead I get a <broken image> icon displayed.

Requirement:

I am displaying list of Image files in a table in a page.

The table has three columns:

Document Name  |    Date of Upload    |     Uploader name

The "Document Name" column will display the name of the documents and these names are visible in the form of hyperlink that has the URL of the document location. (The documents are from SharePoint Online).

My requirement is to on hover I must display a tooltip that will display the image file. (which resembles like a preview)

I am using the below code for kendo tooltip

$("td.documentNo").kendoTooltip({
                      filter: "a.hasTooltip",
                        position: "right",
                        width: 500,
                        height: 500,
                        content: function (e) {
                            var URL = e.target.context.href;
                            return $("<img class='image-preview' height='500' width='500'>").attr("src", URL);
                        }
                    });

 

Here "td.documentNo" :- .documentNo is a class name given to identify the column.

Here "a.hasTooltip" :- .hasTooltip is a class name given to identify the Anchor tag

This on testing in my local works absolutely fine. But when I upload this in Azure Cloud the code doesn't work. It display the tooltip but the image is not displayed.

Am I doing anything wrong. Please guide me.

Regards,

Niroj.

 

[Eyup]

Hello Niroj,

 

Thank you for writing to us.

Although I am afraid third-party deployment environments like Azure or AWS are beyond our support scope, I will nevertheless try to give you some suggestions which I hope will prove helpful to you.

If the tooltip opens and only the image itself is problematic, most probably there is some CORS issue related. To verify that, try to open the page on Chrome browser and open the F12 inspector console to see if there are errors interfering. Usually, the CORS error appears at the top of the console.

Another test you can try is the following:

Cut the <img> element definition and place it directly on the page. If the image does not appear again, probably it is a CORS issue as mentioned above.

However, if the image is shown properly outside the tooltip, but not within it, then it means that it might be related to Telerik UI and we can look at it closer and investigate the problem further.

Does this make sense? Feel free to try suggestions and let me know how it goes.

Let me know your thoughts.

 

Regards,
Eyup
Progress Telerik