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

RadTooltip ignores content if target hyperlink has title

6 Answers 179 Views

ToolTip

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

6 Answers, 1 is accepted

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):

Text property is set
Content element is not empty (e.g. there is content between the RadToolTIps opening and closing tags)
The tooltipified element has a title attribute
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

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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

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.