You can download source code only for control, sample page with control, or see the sample online.
I have created Tooltip control that replaces standard browsers' tooltips with custom ones. You can write your own html template to customize it's look and feel.
The control derives on the client from Sys.UI.Control, and is implemented as WebControl on the server.
It is really easy to use it and it gives really nice experience.
Here is a source for a very simple page showing how to use it:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Demo1.aspx.cs" Inherits="Demo1" %> <%@ Register Assembly="Devarchive.Net" Namespace="Devarchive.Net" TagPrefix="dn" %> <!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 id="Head1" runat="server"> <title>Demo1</title> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <dn:HoverTooltip runat="server" ID="tooltip1" OffsetX="10" OffsetY="10" DefaultTooltipText="This is default tooltip text" DefaultTooltipTitle="This is default title for the tooltip"> <HtmlTemplate> <div style="border: solid 1px blue; background-color: Yellow; color: Blue; font-weight: bold"> <b>{0}</b> <p> {1}</p> </div> </HtmlTemplate> </dn:HoverTooltip> <div style="background-color:Yellow"> <asp:Label runat="server" ID="lb1" Text="Hover me !" ToolTip="This is a tooltip for lb1" /> </div> </form> </body> </html>
using System; public partial class Demo1 : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { tooltip1.AddTooltipControl(lb1); } }
The actual look and feel can be set inside "HtmTemplate" container, where we must place "{0}" and "{1}". "{0}" will be replaced by tooltip title and "{1}" will be replaced by the tooltip text for web control.
In this sample I assigned the following markup to HtmlTemplate property of the control:
<div style="border: solid 1px blue; background-color: Yellow; color: Blue; font-weight: bold"> <b>{0}</b> <p> {1}</p> </div>
Of course you can assign a better designed html yourself.
To attach a tooltip to some control on the page you can use "AddTooltipControl" public method of tooltip control. In the sample I use the code:
tooltip1.AddTooltipControl(lb1);
which attaches Label control to our sinned tooltip.
The tooltip finds that there is some text assigned to the "title" attribute of the span element generated by Label control and attaches mouseover and mouseout events to that control to show/hide corresponding tooltip.
"AddTooltipControl" method takes one argument of type "Control", it needs just the ClientID of the control to pass it to the script, the script is where searching for "title" attribute is made. This means you are not limited to attaching tooltips only to WebControls, any control can be specified, you have to ensure only that control is rendered with correct "title" attribute.
Tooltip control has also following four properties:
OffsetX, OffsetY - tooltip will appear with horizontal/vertical offset to the place where the cursor currently is,
DefaultTooltipText - this text will appear for controls that don't have title attribute set (Tooltip property on the server).
DefaultTooltipTitle - this text will appear for controls that don't have "tooltiptitle" attribute set. This is additional attribute that you can assign to the control. It will be rendered on the place where "{0}" placeholder will reside.
That's it about properties, now let's write some more attractive sample.
The nice thing about the control is - we can place tooltip design into Skin file. We can write there severat tooltip styles with different HtmlTemplate properties, and then use the skins to quickly style tooltips on different pages.
For the sample I created new Theme, and placed inside it my skin and css files that define the design of the tooltip controls:
Tooltip.skin file has the following contents:
<%@RegisterAssembly="Devarchive.Net"Namespace="Devarchive.Net"TagPrefix="dn"%>
<dn:HoverTooltip runat="server"SkinID="RounderCornersTooltip"
OffsetX="10"OffsetY="10"
DefaultTooltipText=""
DefaultTooltipTitle="Rounded Tooltip">
<HtmlTemplate>
<tablecellpadding="0"cellspacing="0"style="background-color:white;">
<tr>
<tdvalign="top"class="corner">
<asp:Imagerunat="server"ID="img1"Width="5px"Height="5px"
ImageUrl="~/App_Themes/Default/Img/ctl.gif" />
</td>
<tdstyle="border-top: solid 1px #758611;"class="spacer">
</td>
<tdvalign="top"class="corner">
<asp:Imagerunat="server"ID="img2"Width="5px"Height="5px"
ImageUrl="~/App_Themes/Default/Img/ctr.gif" />
</td>
</tr>
<tr>
<tdstyle="border-left: solid 1px #758611"width="1">
</td>
<tdalign="left"valign="top"style="width:150px;">
<b>{0}</b><br>
<p>{1}</p>
</td>
<tdstyle="border-right: solid 1px #758611"width="1">
</td>
</tr>
<tr>
<tdvalign="bottom"class="corner">
<asp:Imagerunat="server"ID="img3"Width="5px"Height="5px"
ImageUrl="~/App_Themes/Default/Img/cbl.gif" />
</td>
<tdstyle="border-bottom: solid 1px #758611"class="spacer">
</td>
<tdvalign="bottom"class="corner">
<asp:Imagerunat="server"ID="img4"Width="5px"Height="5px"
ImageUrl="~/App_Themes/Default/Img/cbr.gif" />
</td>
</tr>
</table>
</HtmlTemplate>
</dn:HoverTooltip>
<dn:HoverTooltip runat="server"SkinID="GoupBoxTooltip"
OffsetX="10"OffsetY="10"
DefaultTooltipText=""
DefaultTooltipTitle="Rounded Tooltip">
<HtmlTemplate>
<divclass="GoupBoxTooltip">
<tableborder="0"cellpadding="6"cellspacing="1"class="tborder"width="180">
<thead>
<tr>
<tdclass="thead">
{0}
</td>
</tr>
</thead>
<tbody id="collapseobj_forumrules">
<tr>
<tdclass="alt1">
{1}
</td>
</tr>
</tbody>
</table>
</div>
</HtmlTemplate>
</dn:HoverTooltip>
Here I created two skins for my tooltips.
Now lets write the page markup for our second sample.
Demo2.aspx:
<%@ Page Theme="Default" Language="C#" AutoEventWireup="true" CodeFile="Demo2.aspx.cs" Inherits="Demo2" %> <%@ Register Assembly="Devarchive.Net" Namespace="Devarchive.Net" TagPrefix="dn" %> <!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 id="Head1" runat="server"> <title>Demo2</title> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <dn:HoverTooltip runat="server" ID="tooltip1" SkinID="GoupBoxTooltip"> </dn:HoverTooltip> <dn:HoverTooltip runat="server" ID="tooltip2" SkinID="RounderCornersTooltip"> </dn:HoverTooltip> <br /> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4" ForeColor="#333333" GridLines="None" onrowdatabound="GridView1_RowDataBound"> <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" /> <RowStyle BackColor="#FFFBD6" ForeColor="#333333" /> <Columns> <asp:BoundField DataField="FirstName" HeaderText="First Name" /> <asp:BoundField DataField="LastName" HeaderText="Last Name" /> </Columns> <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" /> <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" /> <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" /> <AlternatingRowStyle BackColor="White" /> </asp:GridView> <br /><br /> <asp:Button OnClientClick="return false" runat="server" Text="Submit" ID="Button1" ToolTip="This button <span class='highlight'>Submits</span>" /> <asp:Button OnClientClick="return false" runat="server" Text="Cancel" ID="Button2" ToolTip="This button <span class='highlight'>Cancels</span>" /> <asp:Button OnClientClick="return false" runat="server" Text="Delete" ID="Button3" ToolTip="This button <span class='highlight'>Deletes</span>" /> <asp:Button OnClientClick="return false" runat="server" Text="Insert" ID="Button4" ToolTip="This button <span class='highlight'>Inserts</span>" /> <asp:Button OnClientClick="return false" runat="server" Text="Edit" ID="Button5" ToolTip="This button <span class='highlight'>Edits</span>" /> <div> </div> </form> </body> </html>
Now as you see it is much simpler to created styled tooltip:
<dn:HoverTooltip runat="server" ID="tooltip1" SkinID="GoupBoxTooltip"> </dn:HoverTooltip> <dn:HoverTooltip runat="server" ID="tooltip2" SkinID="RounderCornersTooltip"> </dn:HoverTooltip>
I have GridView on the page that lists some employees from Northwind database, - only their full names, I want to attach tooltips to each row, and when we hover the row I want to show some additional data about the Employee being hovered.
Also I have several buttons on the page and I want to show tooltips for them as well.
Here is the code behind file for the page:
using System; using System.Data; using System.Web.UI; using System.Web.UI.WebControls; public partial class Demo2 : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { tooltip2.AddTooltipControl(Button1); Button1.Attributes.Add("tooltiptitle", "Note:"); tooltip2.AddTooltipControl(Button2); Button2.Attributes.Add("tooltiptitle", "Note:"); tooltip2.AddTooltipControl(Button3); Button3.Attributes.Add("tooltiptitle", "Note:"); tooltip2.AddTooltipControl(Button4); Button4.Attributes.Add("tooltiptitle", "Note:"); tooltip2.AddTooltipControl(Button5); Button5.Attributes.Add("tooltiptitle", "Note:"); string fileName = Server.MapPath("~/App_Data/TooltipSampleData.xml"); DataTable dt = new DataTable(); dt.ReadXml(fileName); GridView1.DataSource = dt; GridView1.DataBind(); } protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.DataRow) { DataRowView drv = (DataRowView)e.Row.DataItem; if (drv != null) { e.Row.Style.Add(HtmlTextWriterStyle.Cursor, "pointer"); //e.Row.ID = String.Format("row{0}", drv["EmployeeID"]); tooltip1.AddTooltipControl(e.Row); e.Row.Attributes["title"] = drv["Notes"].ToString(); e.Row.Attributes["tooltiptitle"] = String.Format("Notes for {0} {1}:", drv["FirstName"], drv["LastName"]); } } } }
For buttons I want to use different TooltipTitle for each. For this I am assigning them "tooltiptitle" attributes.
For each row of the GridView I use different text for the tooltip ("title" attribute) and different tooltip title ("tooltiptitle" attribute)
Here is the result:
as soon as another row is hovered - the corresponding tooltip is shown,
the same is for buttons:
Note that designs of tooltips are different - it depends on which tooltip I attach control to.
What is nice about the control - it changes it's position if hovered element is too close to the right or bottom bounds of the screen:
Happy programming !
How about doing it unobtrusively:-http://www.kryogenix.org/code/browser/nicetitle/
ReplyDeleteNice suggestion!
ReplyDeleteBut I think unobtrusive way of doing this affects the whole page (document), while the blog post describes the creation of control. Control is rather a part of the page then something affecting whole page. With the control approach we can have different tooltips designed for different controls, with different markup/contents layout inside each of them.
For example lets say I want to have some SkinID="GridTooltip" that I will use with grids, and SkinID="UrlTooltip" that will be used with hyperlinks (for example showing image preview of the target page).
I think about can I or not add the suggested functionality to the control, - I think no, because of the factors I listed above - control that affects the whole page should be then done differently - something like ScriptManager is done - you can place only one instance to the page.
Hi! Your control works well!! Really simple to use. I have one problem though and that is when i test it in IE6 i get a javascript error "div is undefined" but in IE7 it works like a charm. Do you have a solution for this ?
ReplyDeleteIt does not work in ie6.It throws up an error.Do you have the 2.0 version of the source code..
ReplyDeleteThe controls throws an error when it is inside an update panel and when the update panel is updated thru asyncronous postback.
ReplyDeleteHi there! Excellent control.
ReplyDeleteI have trouble though using it inside an update panel. When the panel updates, the control stops working. Any ideas how to overcome this?
Tia,
Nikos.
Great little control. Got it to work with AJAX update panel by moving the control itself outside the update panel, it still attached to controls inside the update panel. Postbacks now work, however, now I don't get an error, but, on postback the tooltips stop rendering? Any ideas. Thanks Tony
ReplyDeletegood component..
ReplyDeletei'm korean...
I can`t speak English well. T_T
May I use this component like freeware?
did you figure out how to make this work in an Ajax updatepanel ?
ReplyDelete-zeke
Hi Zeke,
ReplyDeleteTry adding tooltip control to same update panel where controls it extends are placed. if there are few update panels, create many tooltip controls, attaching to each of them controls residing in the same update panel.
Basically the problem is - tooltip control gets all references of dom elements it extends at init handler of javascript control (it is implemented as Sys.UI.Control). And if dom elements are changed or re-created after postback, references to them are not valid anymore.
So placing control into same update panel, where controls it extends are should fix this, because after postback tooltip control will be recreated again, and therefore it will repopulate all references to re-created dom elements as well.
Hope this helps,
Kirill
sorry, should have been more specific ... the control works inside an update panel, but there is a page error on an asychronous postback, like some other button within the same panel.
ReplyDelete--zeke
Zekke, you are right
ReplyDeletesorry to all of you that were trying to get it working in UpdatePanel -
there was a problem with script in IE.
I did not have a chance to look at comments before to get it fixed.
The problem was with IE, which was raising an error in dispose function, update function should look like:
Please find the line :
delete this.get_element().htIFrame;
in HoverTooltip.js file in Devarchive.Net project, and change this line to:
this.get_element().htIFrame = null;
Then rebuild the project and use updated dll, this fixes the problem.
Thanks,
Kirill
Excellent, this fixed my problem. Thanks for the quick response.
ReplyDeleteThis is really a cool control that will enhance my users experience, thanks.
btw, do you have any tricks to debugging your js applications ?
I couldn't find an easy way to step thru the js logic, esp. for page errors.
Yes sure you can debug javascript in IE and Mozilla
ReplyDeleterefer to http://weblogs.asp.net/scottgu/archive/2007/07/19/vs-2008-javascript-debugging.aspx
for debugging javascript in IE (using Visual Studio)
or use this add-on :
https://addons.mozilla.org/en-US/firefox/addon/1843
to debug javascript in mozilla (firebug)
I personally prefer to debug scripts using firebug, it is simple r and faster
Regards,
Kirill
Any thoughts on the IE6 problem:
ReplyDelete... when i test it in IE6 i get a javascript error "div is undefined" but in IE7 it works like a charm. Do you have a solution for this ?
--Zeke
Zeke,
ReplyDeleteI will look at the issue in the evening, should be missing something in the code.
Thanks
This fixed it for my cases:
ReplyDeleteCommented out line 79 of HoverTooltip.js:
htIFrame.style.zIndex = div.style.zIndex-1;
"Zeke said...
ReplyDeleteThis fixed it for my cases:
Commented out line 79 of HoverTooltip.js:
htIFrame.style.zIndex = div.style.zIndex-1;"
This workaround doesn't work fine for me. The ToolTip-Panel doesn't appear next to the cursor...it appears very "down-page". Any other ideas?
PS: Very nice control!!! Great Work!
Hi segfault,
ReplyDeleteI think that the problem might be some unclosed tag in html on the page.
Try to narrow down the sample and use the tooltip on a simple page, if it works ok,
then try to exclude parts of html from the page where tooltip doesnot work, this way you can find the causing place.
Regards,
Kirill
Hi Kirill,
ReplyDeletei've created a Basic WebPage with just a Lable using your ToolTip-Control. The same div-error appears:
'div' is undefinied
I'm developing on VS2005...so HTML-Errors cause of missing closing tags for example will be triggerd very early.
The Problem seems to be "div" in Line 79 of HoverTooltip.js:
htIFrame.style.zIndex = div.style.zIndex-1;
Any other ideas?
segfault ,
ReplyDeleteI found the problem, there is no div actually, I think I fixed this in the version I work on locally, so I will update the code for download later today,
for now you have to change this:
htIFrame.style.zIndex = div.style.zIndex-1;
to this:
htIFrame.style.zIndex = this.get_element().style.zIndex-1;
Regards,
Kirill
Well done, Commander! ;p
ReplyDeleteIt worx great!
Thx a lot, also for that quick responses...
greets segfault
:)
ReplyDeleteYou are welcome,
Kirill
whats the best way to populate tooltip dynamically calling to the DB. I want to pull back a note on hover over a hyperlink column control in a gridview?
ReplyDeleteAwesome control!!! THNX!!!
ReplyDeleteIf someone looks for DataBase call with this tooltip, mail me :)
Is there an easy way to remove the tooltip control, similar to the add ...
ReplyDeletehttTitleOverBoxTooltip.AddTooltipControl(txtRequestKey);
Attaching control to tooltip control is made initially on server side,
ReplyDeleteyou can remove control from tooltip on client side by using javascript code,
latest code for the control ( see http://devarchive.net/downloads/GridViewControlEmbedder%20Demo.zip to download latest version of control, I will update this post later to show to latest code download) - allows to add and remove controls from tooltip very easy by using javascript code -
for example using
$find('tooltipBehaviorID').addTooltipControl('webcontrolClientID');
$find('tooltipBehaviorID').removeTooltipControl('webcontrolClientID');
you can attach elements on client side and detach them from tooltip.
hi, can this be used to show images in tooltip as well as text, if it can what do i need to change, thanks
ReplyDeleteGreat tool! Any suggestions on getting it to work on a disabled control? Also, adding a delay feature would be really usefull.
ReplyDeleteThanks,
hi i'm so amazed on this control, but i'm having problem bacause i used the control inside the ascx file. and when i run the application the standard tooltip appears what should i do? any help would be appreciated. Thanks a lot.
ReplyDeleteHi,
ReplyDeleteyour tooltip control is great, but I have a small issue :
I have a gridview inside an updatepanel, and each row of the gridview has a button used to show a modalpopup (using modalpopupextender), and each row has a tooltip. On the first load of the page, each tooltip is well displayed. However, after showing and closing a modalpopup, tooltips aren't working anymore : instead, classic tooltips are displayed with the "title" as content.
Any idea how to fix this ?
Does it have someting to do with the invalid references you talk about earlier ?
Thank you very much in advance.
Hi,
ReplyDeleteyour Control works great! I need to populate it programmatically. Do you have any idea how to create the HoverTooltipHtmlTemplateContainer and attach it to an instance of HoverTooltip?
Thanks in advance
Dennis
when i tried to add this control to my project i got this error:
ReplyDeleteScript Manager Required On The Page For HoverTooltip Control
Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.
Exception Details: System.InvalidOperationException: Script Manager Required On The Page For HoverTooltip Control
But i aready put script manager before the control as this:
< asp:ScriptManager id="ScriptManager1" runat="server">
< /asp:ScriptManager>
< dn:HoverTooltip runat="server" ID="tooltip1" SkinID="GoupBoxTooltip">
< /dn:HoverTooltip>
Nice work. I have a requirement where i need to bind a gridview to the tooltip and display on mouseover. This nouseover is on gridview and for eachrow the data changes. Can i do this? Please let me know how?
ReplyDeleteUsha
After asypostback in firefox it not show whole tooltip it only show title. it not show titledescription.
ReplyDeleteAfter asypostback means updatepanel refresh tooltip not show whole Data. it only show title. it not show titledescription.
ReplyDeleteIt is happen only in Firefox and google crome but in IE it work perfectly.
Please help to solve this issue.
Thanks in advance.
Having problems referencing the dll. Compiler is saying that 'Dearchive' could not be found in the global namespace
ReplyDeletedelete this.get_element().htIFrame;
ReplyDeleteI changed it with this.get_element().htIFrame = null;
but when i want to rebuild project i get some other errors.
Could you send updated dll to the blog please.
Hi foreign,
ReplyDeleteyou can download the updated dll on this page
http://blog.devarchive.net/2008/12/simplify-inline-editing-using-gridview.html
this is direct link http://devarchive.net/downloads/GridViewControlEmbedder%20Demo.zip
thanks a lot for code.
ReplyDeletei have a problem with it. In my project,i use a pop up window and pictures in popup.when cursor comes over pictures tooltip deos not open over pictures,it opens another point of page.
i change position of popup with javascript.does this cause problem??
I love this control and have been using it with success for a number of months. We recently migrated our application to .Net 4.0 and now I don't see anything when I hover. Any tips?
ReplyDeleteThanks for the code,..i will try to implement on my editor and look for the output and i hope i will get the results soon...ecommerce web developer
ReplyDeleteNice post to hang on..I really loved it the way of the stuff provided in this article..This has given very useful
ReplyDeletereally its nice and informative news with unique content so thanks for sharing such a useful information.
ReplyDelete- Migration to Joomla
Good to read this post and I appreciate it . Pretty handy and useful too.
ReplyDeleteGreat post and great code!
ReplyDeleteBut I have a problem with a fluid page layout with a fixed width centre column for my main page.
When the browser window is less or the same as the max-width for the column, the tooltip appears correctly beside the cursor, but when the browser window is wider than the max-width for the column, the tooltip is no longer aligned with the cursor, but is in fact moved to the right with the exact same distance as the gap (or auto margin) away from the fixed column width?
It seems to be relating to the else statement within the _move function as below in hovertooltip.js
this.get_element().style.left = (x + this._offsetX) + "px";
Does anyone have any ideas on how to stop this wierd effect as i'm no jscript expert.
Thank you
Managed to solve the issue by referencing the "wrapper" div by it's ID within the page and extracting the OffsetLeft value, then using this to remove from the cursor position within the _move function.
ReplyDeleteI just added the following to the HoverTooltip.js, below the line var innerHeight = bounds.height;
line added:
var GetWrapperPos = document.getElementById("wrapper").offsetLeft
x = x - GetWrapperPos;
Now when the browser window size extends greater than the permitted max width of the div, the tooltip now stays by the cursor.
It may not be the best way but solved my problem.
I am heartly thanks to you because this code is more valuable for me. And I think it will help other people.
ReplyDeleteI am grateful to you as it is very useful information for me. thanks
ReplyDeleteHas anyone investigated or has a working sample on a show/hide delay with this great control? I think that is the only feature to really "round it off" as a fantastic tool? Would be great if they could post some sample code to review & test?
ReplyDeleteOtherwise, it's great!
I realize this post is 4 years old. I am using VS2010 framework 3.5 but simply cannot get this to work.
ReplyDeleteI do get a compile but get the following error:
Parser Error Message: Could not load type 'Devarchive.Net.HoverTooltip' from assembly 'Devarchive.Net, Version=1.0.3025.9901, Culture=neutral, PublicKeyToken=null' because the method 'OnInit' has no implementation (no RVA).
Any ideas?
I have created a Web Application project and copy the default page, the App_Themes folder, and all the code, but when i run the project the text for the tooltiptitle propery doesnt display and the text for the title property displays like a normal tooltip. Anny sugestion?
ReplyDelete
ReplyDeleteThis is a really cool control!
I have added a tooltip attribute to list items in a control in C# code and want to use this cool tooltip control make the html content in my tooltip "Title" attribute.
The control says I'm passing the wrong control type. The ListItem object is a System.Web.UI.WebControls.ListItem and the AddTooltipControl method is looking for System.Web.UI.Control.
How can I make it work with the code snippet below?
al.Add(pPriceLevel);
al.Add(pCustomerSize);
dsItems = Snippets.GetDataset(sConnString.ToString(), "SP_Term_Items_Select", "dt", System.Data.CommandType.StoredProcedure, al);
CheckBoxListWizardItems.DataSource = dsItems.Tables[0];
CheckBoxListWizardItems.DataBind();
foreach (ListItem li in CheckBoxListWizardItems.Items)
{
int iItemInternalID = int.Parse(li.Value);
li.Attributes.Add("title", li.Value.ToString() + "more markup goes here...");
}
Thanks,
Greg
After my previous post about asking for a delayed tooltip, and getting some time to work through having a delayed tooltip, I've managed to get this control working with a customised delay feature and thought i'd share with everyone.
ReplyDeleteAgain, i'm no expert, but I did the following to get it to work...
Modified HoverTooltip.cs to add following
After line 110
[DefaultValue(2000), Browsable(true)]
public int ShowDelay
{
get { return GetPropertyValue("ShowDelay", 2000); }
set { SetPropertyValue("ShowDelay", value); }
}
Also added following in #region IScriptControl Members
scd.AddProperty("showDelay", ShowDelay);
Modified HoverTooltip.js with the following
after line 21 added following
this._showDelay = 2000;
Added following variables within the initialize: function
var ShowTip;
Also added following after set_offsetY: function (about line 145)
get_showDelay: function () {
return this._showDelay;
},
set_showDelay: function (value) {
if (this._showDelay !== value) {
this._showDelay = value;
this.raisePropertyChanged('showDelay');
}
},
Added following in _show: function (args)
var delay = tooltip._showDelay;
and in the if(!webControl.disabled) subsection added:
ShowTip = setTimeout(function () { tooltip.get_element().innerHTML = contents; }, delay);
Within the _hide: function (args) added
clearTimeout(ShowTip);
Once the above has been added and compiled, by default there will be a 2 second delay before the tooltip is displayed, but you can then customise it with the option ShowDelay in microseconds (i.e. 1.5 seconds = 1500) either as codebehind, ASPX or within the theme CSS file.
For my purposes, this just simply rounds off the control nicely and I hope it also helps others too!
Cheers
John