Use Alt Text instead of Title for Tooltip

[Jane]

For an image, I would like to use the Alt Text as the tooltip, not the title.  Is there any way to do this?

[Marin Bratanov]

Hello Jane,

If the title attribute of the image is not set, the tooltip will take the alt attribute. This is the default order of tooltips, hence RadToolTip has the same priority: http://www.telerik.com/help/aspnet-ajax/tooltip-content.html.

Here is a small example:

<img src="images/telerik.png" id="test" alt="alt attribute text"  />
<telerik:RadToolTip ID="RadToolTip1" runat="server" TargetControlID="test" IsClientID="true"
    ShowEvent="OnMouseOver" HideEvent="Default" Width="140px" Height="100px">
</telerik:RadToolTip>

In case you want to keep the title attribute, you would need to customize the showing and content management of the tooltip. For example:

<img src="images/telerik.png" id="test" alt="alt attribute text" title="title text" onmouseover="showTtip(this);" />
<telerik:RadToolTip ID="RadToolTip1" runat="server"
                    ShowEvent="FromCode" HideEvent="LeaveTargetAndToolTip" Width="140px" Height="100px" >
</telerik:RadToolTip>
<script type="text/javascript">
    function showTtip(target) {
        var ttip = $find("<%=RadToolTip1.ClientID %>");
        var altAttr = target.getAttribute("alt");
        var titleAttr = target.getAttribute("title");
        ttip.set_targetControl(target);
        setTimeout(function () {
            ttip.show();
            ttip.set_text(altAttr);
            target.setAttribute("title", titleAttr);
            target.setAttribute("alt", altAttr);
        }, 20);
    }
</script>

Note how the mouse event is handled for the target to get the needed data, store it (because RadToolTIp will remove it from the target once it collects it), show the tooltip, set the needed text and restore the attributes so they are there the next time it has to show.

Regards,

Marin Bratanov
Telerik

 

 

[Jane]

Thanks Marin, that is what I tried first but the text didn't display.  So, I need explicitly difine alt="alt attribute text" , correct?

[Marin Bratanov]

Hi Jane,

You need to manually add the alt attribute to the image. The exact text should not matter, mine was merely an example.


Regards,

Marin Bratanov
Telerik