Sunday, April 13, 2008

Advanced Tooltip Control, ASP.NET AJAX

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>

And code behind:

using System;

public partial class Demo1 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        tooltip1.AddTooltipControl(lb1);
    }
}

Resulting in:

image

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:

image

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">
                      
&nbsp;
                  
</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">
                      
&nbsp;
                  
</td>
                    <
tdalign="left"valign="top"style="width:150px;">
                        <
b>{0}</b><br>
                        <
p>{1}</p>
                    </
td>
                    <
tdstyle="border-right: solid 1px #758611"width="1">
                      
&nbsp;
                  
</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">
                      
&nbsp;
                  
</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:

image

as soon as another row is hovered - the corresponding tooltip is shown,

the same is for buttons:

image

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:

image

image

Happy programming !

Technorati Tags:

kick it on DotNetKicks.com

54 comments:

Anonymous said...

How about doing it unobtrusively:-http://www.kryogenix.org/code/browser/nicetitle/

Kirill Chilingarashvili said...

Nice suggestion!
But 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.

Anonymous said...

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 ?

Anonymous said...

It does not work in ie6.It throws up an error.Do you have the 2.0 version of the source code..

Anonymous said...

The controls throws an error when it is inside an update panel and when the update panel is updated thru asyncronous postback.

lalibi said...

Hi there! Excellent control.

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

Anonymous said...

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

Anonymous said...

good component..
i'm korean...

I can`t speak English well. T_T

May I use this component like freeware?

Unknown said...

did you figure out how to make this work in an Ajax updatepanel ?

-zeke

Kirill Chilingarashvili said...

Hi Zeke,

Try 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

Unknown said...

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.

--zeke

Kirill Chilingarashvili said...

Zekke, you are right
sorry 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

Unknown said...

Excellent, this fixed my problem. Thanks for the quick response.
This 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.

Kirill Chilingarashvili said...

Yes sure you can debug javascript in IE and Mozilla
refer 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

Unknown said...

Any thoughts on the IE6 problem:

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

Kirill Chilingarashvili said...

Zeke,
I will look at the issue in the evening, should be missing something in the code.
Thanks

Unknown said...

This fixed it for my cases:

Commented out line 79 of HoverTooltip.js:

htIFrame.style.zIndex = div.style.zIndex-1;

Anonymous said...

"Zeke said...

This 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!

Kirill Chilingarashvili said...

Hi segfault,
I 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

Anonymous said...

Hi Kirill,

i'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?

Kirill Chilingarashvili said...

segfault ,
I 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

Anonymous said...

Well done, Commander! ;p

It worx great!

Thx a lot, also for that quick responses...

greets segfault

Kirill Chilingarashvili said...

:)

You are welcome,

Kirill

Unknown said...

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?

Denis K said...

Awesome control!!! THNX!!!
If someone looks for DataBase call with this tooltip, mail me :)

Unknown said...

Is there an easy way to remove the tooltip control, similar to the add ...

httTitleOverBoxTooltip.AddTooltipControl(txtRequestKey);

Kirill Chilingarashvili said...

Attaching control to tooltip control is made initially on server side,
you 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.

Anonymous said...

hi, can this be used to show images in tooltip as well as text, if it can what do i need to change, thanks

Anonymous said...

Great tool! Any suggestions on getting it to work on a disabled control? Also, adding a delay feature would be really usefull.

Thanks,

Unknown said...

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.

john said...

Hi,

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

Anonymous said...

Hi,

your 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

AbuSolyman said...

when i tried to add this control to my project i got this error:
Script 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>

usha said...

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?

Usha

Anonymous said...

After asypostback in firefox it not show whole tooltip it only show title. it not show titledescription.

Ketan Patel said...

After asypostback means updatepanel refresh tooltip not show whole Data. it only show title. it not show titledescription.
It is happen only in Firefox and google crome but in IE it work perfectly.

Please help to solve this issue.
Thanks in advance.

Christopher said...

Having problems referencing the dll. Compiler is saying that 'Dearchive' could not be found in the global namespace

Anonymous said...

delete this.get_element().htIFrame;
I 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.

Kirill Chilingarashvili said...

Hi foreign,

you 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

Anonymous said...

thanks a lot for code.
i 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??

Beth said...

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?

Ecommerce developer said...

Thanks 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

PHP Developer India said...

Nice post to hang on..I really loved it the way of the stuff provided in this article..This has given very useful

Unknown said...

really its nice and informative news with unique content so thanks for sharing such a useful information.
- Migration to Joomla

Php Web Development said...

Good to read this post and I appreciate it . Pretty handy and useful too.

Anonymous said...

Great post and great code!

But 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

Anonymous said...

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.

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

Php Development India said...

I am heartly thanks to you because this code is more valuable for me. And I think it will help other people.

Magento Developer said...

I am grateful to you as it is very useful information for me. thanks

Anonymous said...

Has 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?

Otherwise, it's great!

Anonymous said...

I realize this post is 4 years old. I am using VS2010 framework 3.5 but simply cannot get this to work.

I 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?

Anonymous said...

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?

Anonymous said...


This 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

Anonymous said...

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.

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