Use Alt Text instead of Title for Tooltip

4 posts, 0 answers
  1. Jane
    Jane avatar
    12 posts
    Member since:
    Jun 2014

    Posted 03 Jun 2014 Link to this post

    For an image, I would like to use the Alt Text as the tooltip, not the title.  Is there any way to do this?
  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 03 Jun 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jane
    Jane avatar
    12 posts
    Member since:
    Jun 2014

    Posted 03 Jun 2014 in reply to Marin Bratanov Link to this post

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

    Posted 03 Jun 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top