3 Answers, 1 is accepted
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,
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.

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,
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.