RadControls ToolTip Template
Hello Community,
I was looking to add a RadControls tooltip to a couple of my home page images. Now, I was able to get the tool tip to show up, not a problem.
My question is, how do I get a template to show up in the tool tip? I need html code, with images, to show in the tool tip.
Is this even possible in sitefinity or would you recommend a different approach to this.
Thanks,
Jason
Hi Jason,
You can use the modality option of the RadToolTip.
Kind regards,
Ivan Dimitrov
the Telerik team
How does this help me in sitefinity?
I don't want it to be modal, i just want a normal html tool tip like you can do with your RadTool tip in a regular asp.net application.
Hi Jason ,
There is not difference if you are going to use RadToolTip in Sitefinity or inside another application.
You can use RadToolTipManager and its OnAjaxUpdate event to load a control in the tool tip.
You can check the demos for RadToolTip to see how the control can be used. If you like one of the demos, please get back to me and I will show you how to implement it in Sitefinity.
All the best,
Ivan Dimitrov
the Telerik team
Okay yes, that would be great. We are using SiteFinity 4.0 and I have not been able to find any resources to implement the RadToolTipManager on my page.
Just the basic default example is what we are looking to do:
http://demos.telerik.com/aspnet-ajax/tooltip/examples/default/defaultcs.aspx
We are going to have some main images on the site and when you mouse over one of the images, it will load a sub page that contains menu links with images to different parts of the site.
Thanks
Hi Jason,
Here is a sample control
<telerik:RadToolTipManager runat="server" AnimationDuration="300" ShowDelay="200" EnableShadow="true" HideDelay="1" ID="RadToolTipManager1" Width="453px" Height="210px" RelativeTo="Element" Animation="Slide" Position="BottomCenter" OnAjaxUpdate="OnAjaxUpdate" Skin="Telerik" /> <asp:Repeater runat="server" ID="Repeater1"> <ItemTemplate> <div style="border: 1px solid #999999; float: left; margin: 3px; width: 125px; height: 125px;"> <asp:Image runat="server" ID="Image1" /> <div runat="server" id="smallImage" style="width: 125px; height: 125px; background-position: center; background-repeat: no-repeat;"> </div> </div> </ItemTemplate> </asp:Repeater>public partial class RadToolTip : System.Web.UI.UserControl protected void OnAjaxUpdate(object sender, ToolTipUpdateEventArgs args) this.UpdateToolTip(args.Value, args.UpdatePanel); private void UpdateToolTip(string elementID, UpdatePanel panel) // pass the elementId to a control which you want to show the image. protected void Page_Load(object sender, EventArgs e) var ds = App.WorkWith().Images().Get().ToList(); Repeater1.DataSource = ds; Repeater1.ItemDataBound += new RepeaterItemEventHandler(Repeater1_ItemDataBound); Repeater1.DataBind(); void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e) if (e.Item.ItemType == ListItemType.AlternatingItem || e.Item.ItemType == ListItemType.AlternatingItem) var item = e.Item.DataItem as Telerik.Sitefinity.Libraries.Model.Image; var img = e.Item.FindControl("Image1") as Image; img.ImageUrl = item.MediaUrl; this.RadToolTipManager1.TargetControls.Add(img.ClientID, item.MediaUrl, true);