3 Answers, 1 is accepted
0
Hi Dave,
You can achieve the desired functionality by using the RadToolTip control to display a tooltip over the drag handle. For your convenience I have attached a sample page that demonstrates this approach. Please use it as a reference for incorporating this feature into your actual project.
Kind regards,
Slav
the Telerik team
You can achieve the desired functionality by using the RadToolTip control to display a tooltip over the drag handle. For your convenience I have attached a sample page that demonstrates this approach. Please use it as a reference for incorporating this feature into your actual project.
Kind regards,
Slav
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Dave
Top achievements
Rank 1
Rank 1
answered on 11 Aug 2012, 01:51 PM
Thanks for reply,
this has worked for me, but my requirement is if there are 2 slider in my page, and I need to show the tool tip for each slider permanently.
With the given code the I am not able to achieve the requirement, to show the tooltip for both slider.
Code is as below.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="RadSliderWithRadTooltips.aspx.cs"
Inherits="RadSliderWithRadTooltips" %>
<%@ 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></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="Scriptmanager1" runat="server" />
<script type="text/javascript">
function pageLoad() {
var slider = $find("<%= radSliderMonthlyIncome.ClientID %>");
var slider1 = $find("<%= radSliderTaxBracket.ClientID %>");
setTimeout(function () {
var ttip = $find("<%= radToolTipMonthlyIncome.ClientID %>");
var ttip1 = $find("<%= radToolTipTaxBracket.ClientID %>");
var dragHandle = slider.get_dragHandles()[0];
var dragHandle1 = slider1.get_dragHandles()[0];
ttip.set_targetControl(dragHandle);
ttip.set_text(slider.get_value().toString());
ttip1.set_targetControl(dragHandle1);
ttip1.set_text(slider1.get_value().toString());
OnClientValueChanged(slider1);
OnClientValueChanged(slider);
}, 0);
}
function OnClientValueChanged(sender, args) {
var varcontrolname = null;
var vartooltipname = null;
var senderid = sender.get_id();
switch (senderid) {
case "<%= radSliderMonthlyIncome.ClientID %>":
vartooltipname = "<%= radToolTipMonthlyIncome.ClientID %>";
break;
case "<%= radSliderTaxBracket.ClientID %>":
vartooltipname = "<%= radToolTipTaxBracket.ClientID %>";
break;
default: alert("have not matched with any sender");
break;
}
var ttip = $find(vartooltipname);
ttip.set_text(sender.get_value().toString());
//
setTimeout(function () {
ttip.show();
}, 10);
}
//
</script>
<div>
<telerik:RadSlider ID="radSliderMonthlyIncome" runat="server" Width="400" Height="50" OnClientValueChanged="OnClientValueChanged"
Style="margin-top: 100px;">
</telerik:RadSlider>
<telerik:RadToolTip runat="server" ID="radToolTipMonthlyIncome" ShowEvent="FromCode" HideEvent="FromCode" RelativeTo="Element" Position="TopCenter">
</telerik:RadToolTip>
<telerik:RadSlider ID="radSliderTaxBracket" runat="server" Width="400" Height="50" OnClientValueChanged="OnClientValueChanged"
Style="margin-top: 100px;">
</telerik:RadSlider>
<telerik:RadToolTip runat="server" ID="radToolTipTaxBracket" ShowEvent="FromCode" HideEvent="FromCode" RelativeTo="Element" Position="TopCenter">
</telerik:RadToolTip>
</div>
</form>
</body>
</html>
0
Hello Dave,
You cannot have more than one RadToolTip visible on the page at any given time. This is the behavior any toolip has, in the OS for example, or the regular browser tooltips - they all close when another tooltip is shown and therefore the RadTooltip has the same behavior.
What I can suggest is to replace it with a small HTML structure that you will position according to the slider handle with JavaScript. I am attaching a simple example of the logic to the thread. You can use it as base and extend it to match your requirements.
Greetings,
Marin Bratanov
the Telerik team
You cannot have more than one RadToolTip visible on the page at any given time. This is the behavior any toolip has, in the OS for example, or the regular browser tooltips - they all close when another tooltip is shown and therefore the RadTooltip has the same behavior.
What I can suggest is to replace it with a small HTML structure that you will position according to the slider handle with JavaScript. I am attaching a simple example of the logic to the thread. You can use it as base and extend it to match your requirements.
Greetings,
Marin Bratanov
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.