Tooltips on hyperlinked image

[Jason BBG]

Hi there. Newbie, non-developer type bod here with a query please. I work in Support and have a customer reporting the following issue with the editor:

1. Insert an image into a web page
2. Select the image and use the Hyperlink Editor to link it to a URL and also to add a tooltip

Results: the image is hyperlinked but no tooltip will appear. This is because (if you look at the html code) the title tag is inserted before the img tag for the image and is therefore not read. You can workaround this by selecting the image and choosing the Image Editor to add alt text (which is correctly placed inside the img tag), but should the user be expected to do this?

Is this a bug in Telerik in that tooltips do not work for hyperlinked images? Or is it a fault with the way that IE reads the code\tags?

Thanks for your help, Jason

[Dobromir]

Hi Jason,

This problem is not directly related to RadEditor but to the way Internet Explorer behaves. In order to provide a XHTML compliant output, RadEditor inserts an alt attribute to the images inside the content area - if an alt text is not defined, an empty string is provided to the alt attribute. In Internet Explorer, when hovering an image which is inside an A tag, the image's alt attribute is displayed instead of the link's target attribute.

I would recommend providing an Alt Text to the images added inside RadEditor's content, and if that image is inside a that Alt Text should match the link's title attribute.

As an alternative solution I suggest you to examine the RadEditor's content and apply Alt Text to the all images inside links. This can be achieved with the following sample code:

<telerik:RadEditor ID="RadEditor1" runat="server" OnClientSubmit="OnClientSubmit">
    <Content><a href="http://demos.telerik.com/aspnet-ajax/editor/examples/default/defaultcs.aspx" title="RadEditor for ASP.NET AJAX"><img alt="" src="http://demos.telerik.com/aspnet-ajax/editor/Img/editor.jpg" /></a>
    </Content>
</telerik:RadEditor>
<asp:Button ID="Button1" runat="server" Text="Button" />
<script type="text/javascript">
    function OnClientSubmit(editor, args)
    {
        //get reference to RadEditor's content area document
        var oDoc = editor.get_document();
        //get reference to the links inside RadEditor's content area
        var links = oDoc.getElementsByTagName("a");

        for (var i = 0; i < links.length; i++)
        {
            var link = links[i];
            //get links title
            var linkTitle = link.getAttribute("title");
            //check if a link has title set and if it contains only 1 image
            if (link.getElementsByTagName("img").length == 1 && linkTitle != "")
            {
                //set link's title as an alt to the image
                link.getElementsByTagName("img")[0].setAttribute("alt", linkTitle);
            }
        }
    }
</script>

All the best,
Dobromir
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Jason BBG]

Thanks for the reply Dobromir. I'll present this to the Developers :)

Best regards, Jason