RadTooltip ignores content if target hyperlink has title

7 posts, 0 answers
  1. Mark Davis
    Mark Davis avatar
    30 posts
    Member since:
    Nov 2005

    Posted 28 Mar 2008 Link to this post

    I am using a RadTooltip instance to display some text and I am adding my content server-side to the tooltip's Controls collection. I set the TargetControlID property to a hyperlink. The tooltip ShowEvent is set to OnClick.

    If the target hyperlink has its ToolTip property set, then the tooltip uses that text as its content and ignores the content I added via the Controls collection.

    If the target hyperlink does not have its ToolTip property set, then the content is correctly displayed.

    Is there something I need to do to override this behavior or is this a known bug?

    I want the target hyperlink ToolTip/title text displayed when the user mouses over the link, and the rich content (RadTooltip.Controls) to be displayed when the user clicks the link.
  2. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 31 Mar 2008 Link to this post

    Hi Mark,

    The reason for this behavior is because by design, the different way of settings tooltip's content has different priorities for showing the RadToolTip.
    The priorities are (#1 is with highest priority):
    1. Text property is set
    2. Content element is not empty (e.g. there is content between the RadToolTIps opening and closing tags)
    3. The tooltipified element has a title attribute
    4. Dynamically created tooltip to be used in AJAX load on demand scenario
    In your scenario, you are loading the content dynamically, e.g. case #4, but since the tooltipified element has a title attribute (#3), the title will be the one that is displayed in the rendered RadToolTip.

    We will consider changing the priority list or to provide some way by which the developer can explicitly set the desired content, but this will happen in one of the following releases of the control.




    Best wishes,
    Georgi Tunev
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Mark Davis
    Mark Davis avatar
    30 posts
    Member since:
    Nov 2005

    Posted 02 Apr 2008 Link to this post

    We need to have a hyperlink tooltip (title attribute) for accessibility reasons and want the RadTooltip extender to show our rich content (pulled from a database, so it needs to be added to RadTooltip.Controls at runtime). I can probably set the hyperlink title from script, but would certainly appreciate more control over this behavior in the future. Thanks!
  5. Vladimir
    Vladimir avatar
    6 posts
    Member since:
    Sep 2007

    Posted 18 Nov 2014 in reply to Georgi Tunev Link to this post

    Hello,

    Did anything change? We're facing the problem like the one described by the topic starter. Please consider this code: 


    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TelerikTest.aspx.cs" Inherits="DataTables.TelerikTest" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <head runat="server">
        <title>Sample page (Telerik)</title>
    </head>
    <body>
        <form id="form1" runat="server">
         
        <script type="text/javascript">
            function showTooltip(button) {
                var tooltip = $find("<%=ttSample.ClientID %>");
                tooltip.set_targetControl(button);
     
                setTimeout(function () {
                    tooltip.show();
                }, 100);
            }
        </script>
     
        <asp:ScriptManager runat="server" ID="scriptManager1"></asp:ScriptManager>
             
        <div>
            <div><input title='button 1' type="button" onclick="showTooltip(this); return false;" value="Button 1" /></div>
            <div><input title='button 2' type="button" onclick="showTooltip(this); return false;" value="Button 2" /></div>
            <div><input title='button 3' type="button" onclick="showTooltip(this); return false;" value="Button 3" /></div>
     
        </div>
     
            <telerik:RadToolTip runat="server" ID="ttSample" ShowEvent="FromCode" HideEvent="ManualClose" RelativeTo="Element" Position="MiddleRight">
                Some funny content here
                <asp:Button runat="server" ID="btnTest" Text="Test button" />
            </telerik:RadToolTip>
        </form>
    </body>
    </html>


    As you see, all three buttons have "title" properties set. As a result when they are clicked we see "button 1/2/3" text instead of what's inside the tooltip. It doesn't make sense. Especially if we take into account the part of your reply where you describe the priorities for showing the RadTooltip content. I guess my case is about priority #2. Though case #3 takes priority here. 

    Could you please give us a tip? We want usual help tooltips to be shown on our links/buttons, but we also want RadTooltips to be shown 


     

  6. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 18 Nov 2014 Link to this post

    Hello Vladimir,

    The following article explains the tooltip content priorities: http://www.telerik.com/help/aspnet-ajax/tooltip-content.html. Since it is, first and foremost, a replacement for the browser tooltip, the title attribute of the target control takes priority over rich content.

    Thus, the title attribute of the HTML elements will take precedence in this case and the behaviour you see is expected.

    What I can offer is the following function override that will prevent tooltips from taking the title attribute of their targets. Note that it will affect all instance on the page and you should use it with care.

    Telerik.Web.UI.RadToolTip.prototype._getToolTipAltText = function(target) {
        var targetControl = target ? target : this.get_targetControl();
        if (targetControl) {
            var title = targetControl.getAttribute("title");
            var ignoreAlt = this.get_ignoreAltAttribute();
            var alt = ignoreAlt? null : targetControl.getAttribute("alt");
            if (title || alt) {
                if (!ignoreAlt) {
                    targetControl.removeAttribute("alt");
                }
                //targetControl.removeAttribute("title");
                //if (!this.get_text())
                //{
                //  var content = title ? title : alt;
                //  this.set_text(content);
                //}
            }
        }
    }



    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.

     
  7. Vladimir
    Vladimir avatar
    6 posts
    Member since:
    Sep 2007

    Posted 18 Nov 2014 in reply to Marin Bratanov Link to this post

    Well, that's disappointing. It's already 2014 but you still have no property like "UseTooltipContentNoMatterWhat". Anyway,thank you. 

    I'd rather do something like this before I call to show the tooltip: 

    $(button).removeAttr("title");

    ... will save title to some hidden field and will then put it back when tooltip is hidden. 
  8. Vladimir
    Vladimir avatar
    6 posts
    Member since:
    Sep 2007

    Posted 18 Nov 2014 in reply to Vladimir Link to this post

    Ok, just to complete this topic. Probably this will work better: 

    function showTooltip(button) {
     
                var title = $(button).attr("title");
                $(button).removeAttr("title");
                 
                var tooltip = $find("<%=ttSample.ClientID %>");
                tooltip.set_targetControl(button);
     
                setTimeout(function () {
                    tooltip.show();
                    $(button).attr("title", title);
                }, 100);
            }
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017