This is a migrated thread and some comments may be shown as answers.

RadTooltip ignores content if target hyperlink has title

6 Answers 119 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
Mark Davis
Top achievements
Rank 1
Mark Davis asked on 28 Mar 2008, 11:44 PM
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.

6 Answers, 1 is accepted

Sort by
0
Georgi Tunev
Telerik team
answered on 31 Mar 2008, 03:13 PM
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
0
Mark Davis
Top achievements
Rank 1
answered on 03 Apr 2008, 12:30 AM
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!
0
Vladimir
Top achievements
Rank 1
answered on 18 Nov 2014, 12:12 PM
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 


 

0
Marin Bratanov
Telerik team
answered on 18 Nov 2014, 01:51 PM

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.

 
0
Vladimir
Top achievements
Rank 1
answered on 18 Nov 2014, 02:14 PM
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. 
0
Vladimir
Top achievements
Rank 1
answered on 18 Nov 2014, 02:26 PM
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);
        }
Tags
ToolTip
Asked by
Mark Davis
Top achievements
Rank 1
Answers by
Georgi Tunev
Telerik team
Mark Davis
Top achievements
Rank 1
Vladimir
Top achievements
Rank 1
Marin Bratanov
Telerik team
Share this question
or