Click here to Skip to main content
Click here to Skip to main content

Notes Icon Tooltip

, 5 Mar 2006
Rate this:
Please Sign up or sign in to vote.
A Custom Control to show tooltip text over a Icon.

Sample Image - NotesTooltip.jpg

Introduction

The article is all about ASP.net Custom Control which shows tooltip when mouse moves over a icon. It is a control therefore developer just need to tell tooltip text to be displayed. If tooltip text is empty, a different icon can be displayed.

Features

  • Formatted HTML can be written inside the tooltip text.
  • Icon can have different images when tooltip text has value and when not.
  • There are various exposed attributes one can use for different tooltip behaviour.
  • Icon Image etc. can be changed from codebehind at run time.
  • This custom control can be used inside a DataGrid or User Control, without any problem.
  • Icon can be replaced with normal text if required.
  • Design Time Support in VS.net IDE.
  • Tooltip uses IFRAME therefore it appears even over the dropdown.

Prerequisites

For displaying tooltip I've used script provided by http://www.walterzorn.com/tooltip/tooltip_e.htm. One of the best web tooltip supported by various browsers and with lots of feature. I'll advise everyone to go this site and get a idea of how this tooltip feature works. You'll also come to know system configuration while using this Custom Control.

Caution: I've attached wz_tooltip.js, and supplied code is working perfectly fine with this. In case you download latest wz_tooltip.js from site http://www.walterzorn.com/tooltip/tooltip_e.htm, update Notes.cs as well if required.

Attributes

  • Text: Tooltip text. Default: Empty.
  • DisplayText: Show this text instead of Icon. Default: Empty.
  • EnableImage: Image to display when tooltip text has some data. If DisplayText is not empty, this is ignored. Default: notes.gif.
  • DisableImage: Image to display when tooltip text is empty. If DisplayText is not empty, this is ignored. Default: notesblank.gif.
  • Sticky: The tooltip stays fixed on its initial position until another tooltip is activated, or the user clicks on the document. Value: true. To enforce the tooltip to disappear after a certain time span, however, you might additionally apply the this.Temp command. Default: false.
  • NotesWidth: Tooltip Width. Default: 300.
  • Above: Places the tooltip above the mousepointer. Additionally applying the this.OffSetY command allows to set the vertical distance from the mousepointer. Default: false.
  • BgColor: Background color of the tooltip. Default: #e6ecff.
  • BgImg: Background image. Default: Empty.
  • TBorderWidth: Width of tooltip border. Default: 1.
  • TBorderColor: Border color. Default: #003399.
  • Delay: Tooltip shows up after the specified timeout (milliseconds). A behavior similar to that of OS based tooltips. Default: 500.
  • Fix: Fixes the tooltip to the co-ordinates specified within the square brackets. Useful, for example, if combined with the this.Sticky command. Default: Empty.
  • FontColor: Font Color of tooltip. Default: #000066.
  • FontFace: Font face/family of tooltip. Default: arial,helvetica,sans-serif.
  • FontSize: Font size of tooltip text. Default: 11px.
  • FontWeight: Font weight of tooltip text. Default: normal.
  • Left: Tooltip positioned on the left side of the mousepointer. Default: false.
  • OffSetX: Horizontal offset from mouse-pointer. Default: 12.
  • OffSetY: Vertical offset from mouse-pointer. Default: 15.
  • OpaCity: Transparency of tooltip. Opacity is the opposite of transparency. Value must be a number between 0 (fully transparent) and 100 (opaque, no transparency). Not (yet) supported by Opera. Default: 100.
  • Padding: Inner spacing, i.e. the spacing between border and content, for instance text or image(s). Default: 3.
  • ShadowColor: Creates shadow with the specified color. Default: Empty.
  • ShadowWidth: Creates shadow with the specified width (offset). Shadow color is automatically set to #cccccc (light grey) Default: 0.
  • Tstatic: Like OS-based tooltips, the tooltip doesn't follow the movements of the mouse-pointer. Default: true.
  • Temp: Specifies a time span in milliseconds after which the tooltip disappears, even if the mousepointer is still on the concerned HTML element, or if the this.Sticky command has been applied. Values less than or equal to 0 make the tooltip behave normally as if no time span had been specified. Default: 0.
  • TextAlign: Aligns the text of both the title and the body of the tooltip. Values can be one of these right, justify or left. Default: left.
  • Title: Tooltip Title. Background color is automatically the same as the border color. Default: Empty.
  • TitleColor: Tooltip Title Color. Default: #ffffff.
Note: Most of the attributes above mentioned maps with attribute of wz_tooltip.js. Please feel free adding new attributes here if required.

Using the Code

Simple Tooltip

<Tittle:Notes id="Notes1"  runat="server" Text="First Tooltip" />

The above would be rendered as:

Tooltip with additional properties (Shadow, Back Color Yellow, Placed above, Different Icon, Hyperlink inside tooltip.)

<Tittle:Notes id="Notes4" BgColor="Yellow" ShadowWidth=3 ShadowColor=Black Above=True 
EnableImage="notespad.gif" DisableImage="blanknotespad.gif" runat="server" Sticky="true" 
Text="My first Asp.net Tooltip Custom Control created with the help of script provided 
by <a href='http://www.walterzorn.com'>http://www.walterzorn.com</a>" />

The above would be rendered as:

Different icon when tooltip text is filled and empty

<Tittle:Notes id="Notes5" runat="server" Text="Different Icons for Filled/Empty Tooltip Text." />        
<Tittle:Notes id="Notes6" runat="server" Text="" />
<Tittle:Notes id="Notes7" EnableImage="notespad.gif" DisableImage="blanknotespad.gif" 
    runat="server" Text="Different Icons for Filled/Empty Tooltip Text." />        
<Tittle:Notes id="Notes8" EnableImage="notespad.gif" DisableImage="blanknotespad.gif" 
    runat="server" Text="" />

The above would be rendered as:

Showing text instead of Icon

<Tittle:Notes id="Notes3" runat="server" DisplayText="Move Over Me" Text="Tooltip Text" 
    NotesWidth="150" BgColor=#C4C400 />

The above would be rendered as:

Providing Junk Data and treating with Escape Characters

Inside ASPX

<Tittle:Notes id="Notes10" runat="server" 
Text = "Junk Data: <font color=red>~!@#$%^&*()'{}[],.&quot;&lt;&gt;\</font>" 
/>

Inside CodeBehind

Notes11.Text = "Junk Data: <font color=red>~!@#$%^&*()'{}[],.\"&lt;&gt;\\</font>";

The above both would be rendered as:

Changing Image/Text dynamically from codebehind while using in a DataGrid.

x.Aspx

<asp:DataGrid OnItemDataBound="dg_OnItemDataBound" ..>
..
<asp:TemplateColumn HeaderText="Grade"  HeaderStyle-HorizontalAlign=Left ItemStyle-HorizontalAlign=Center >
    <ITEMTEMPLATE>
        <Tittle:NOTES id="notesFaculties" runat="server" DisableImage="facultydisabled.gif"
            EnableImage="facultydisabled.gif" Text='<%# DataBinder.Eval(Container, "DataItem.Age") %>'
            NotesWidth="40" TBorderColor='Red' FontColor=Green ></Tittle:NOTES>
    </ITEMTEMPLATE>
</asp:TemplateColumn>
..
</asp:DataGrid>            

x.Aspx.cs

public void dg_OnItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
{
    if(e.Item.ItemType != ListItemType.Header && e.Item.ItemType != ListItemType.Footer)
    {
        Notes notesFaculties = (Notes)e.Item.FindControl("notesFaculties");
        int marks=Convert.ToInt32(notesFaculties.Text);

        if ( marks > 25 )
        {
            if ( marks > 40 )
                notesFaculties.EnableImage = "external.gif";
            else
                notesFaculties.EnableImage = "internalexternal.gif";
        }
        else if ( marks < 9 )
            notesFaculties.EnableImage = "facultydisabled.gif";
        else
            notesFaculties.EnableImage = "internal.gif";
    }
}

The above would be rendered as:

Using Notes Icon instead of multi line text, for large inputs in a DataGrid.

This is a alternate of showing multiline text in a DataGrid, multiline spoils the GUI layout, which can be saved here:

Tehnical Implementation Insight

Notes.cs

..
public class Notes : WebControl, INamingContainer, IPostBackDataHandler, IPostBackEventHandler 
{
    ..
    protected override void CreateChildControls() 
    {
        TextBox txtNotes = new TextBox();
        txtNotes.ID = "txtNotes";
        txtNotes.Text = this.text;
        txtNotes.Style.Add("display","none");
        HyperLink hyper = new HyperLink();
        
        hyper.NavigateUrl = "javascript:void(0)";
        if ( text != "" )
        {
            ..
            hyper.Attributes.Add("onmouseover",
                onOverScript+"return escape(this.previousSibling.value)");
        }
        
        if ( displayText != "" )
        {
            Literal lit = new Literal();
            lit.Text = displayText;
            hyper.Controls.Add(lit);
        }
        else
        {
            Image img = new Image();
            img.ID = "imgNotes";
            img.BorderWidth = 0;
            if ( text != "" )
                img.ImageUrl = Config.ImagePath + enableImage;
            else
                img.ImageUrl = Config.ImagePath + disableImage;

            hyper.Controls.Add(img);
        }

        this.Controls.Add(txtNotes);
        this.Controls.Add(hyper);
    }
    
    public bool LoadPostData(string postDatakey, NameValueCollection postCollection)
    {
        text = postCollection[postDatakey + ":txtNotes"];
        return true;
    }
    protected override void OnPreRender(EventArgs e)
    {
        if ( !Page.IsStartupScriptRegistered("wztooltip") )
        {
            Page.RegisterStartupScript("wztooltip","<script language="javascript"
            src='" + Config.JSPath + "wz_tooltip.js'
            type='text/javascript'></script>");
        }
    }
}

see Complete Code - Click here

FAQs

Why should I use your control, when the tooltip code given by http://walterzorn.com/ is sufficizing my need?

Writing concatenated htmls are not good way of coding that too when you work on .Net and you feel everything advance and in form of Controls. Just specify the tooltip text and forget about how it is rendered, not even think of including JS on the page, control will do that.

You are using code of http://walterzorn.com/, what's new which you added? and why didnt you write your own code ?

I'm giving complete credit to http://walterzorn.com/ for providing such valuable javascript code, extending it further I'm easing the work of .Net Developers, moreover I havent changed a single line of code of him, and has given link to his site from my article as many times as possible. BTW he is going to be applauded for his work and may get lots of hits because of this article. I preferred to use his supplied code because it is flawless and I didnt want to waste my time for doing what he is mastered in.

Will tooltip be above all controls for example drop down?

Yes. The tooltip code has been written using IFRAME, which can float above any control on web page.

Will it maintain the state of tooltip and will work inside a User Control and DataGrid etc.?

Yes, all such common functionality have been taken care of.

Can you advise where all it is useful for me?

  • When you want to avoid web page to capture too much of area because of large comments/remarks, you can use notes icon instead and on tooltip can show the comment text.
  • In DataGrid, where big sentences like comments/feedback/remarks becomes necessary to show, notes icon can be used to save space, and maintain GUI layout.

Will this code work in .NET 2.0 or Above?

I dont know I dont have .NET 2.0 to test it.

Future Enhancements Possible

Clicking on Notes Icon will open a window where user can modify the comment and clicking save button will show the newly added comment in tooltip.

References

I went through various microsoft and other .Net site while developing this Custom Control, and I would recommend every new .Net developers who are enthusiastic to learn custom control to read supplied Notes.cs. I would have not been able to develop this custom control if I had not have script from below site.

Tooltip Javascript Code is taken from this site.

http://www.walterzorn.com/

Conclusion

I would really be interested in knowing if this code has helped you by any means, please do not hesitate or be lazy in dropping your comments telling what you have felt about this submission and how much it has helped you. I would appreciate it if you keep the URL of this page inside the control's code while using it.

History

  • Created on: 06 March 2006. 

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Tittle Joseph
Team Leader Royal Bank of Scotland
India India
Total 11+ years of experience in Software Development. Expertise in .net (C#, asp.net, controls making, webservice, ado.net, xml/xsl, assemblies, rational XDE etc.) also UML, Design Patterns, ASP, Javascript, VbScript, Dhtml, CSS etc.
 
Member of Planet-Source-Code.com, www.brainbench.com and many other and have submitted several snippets/sample applications on the web.
 
Email:tittlejoseph@gmail.com

Comments and Discussions

 
Generalgood Pinmemberali_reza_zareian31-Jul-09 23:40 
Questionhow can i give tooltip at runtime to the text of a .txt file. PinmemberAVIHAR111113-May-09 2:31 
Generalajax updatepanel Pinmemberpduncan8812-Dec-06 12:39 
GeneralRe: ajax updatepanel PinmemberTittle Joseph13-Dec-06 4:57 
Questionajax updatepanel issue Pinmembersundar_m18-Mar-08 4:52 
QuestionHow to NOT receive focus? PinmemberDripCatcher3-Dec-06 13:56 
AnswerRe: How to NOT receive focus? PinmemberTittle Joseph3-Dec-06 22:49 
QuestionHow to display data inside a datagrid with different font? Pinmemberbaburv9-Oct-06 20:29 
AnswerRe: How to display data inside a datagrid with different font? PinmemberTittle Joseph3-Nov-06 1:53 
GeneralSmall Bug Fix PinmemberMark Zak23-Aug-06 10:40 
GeneralRe: Small Bug Fix PinmemberTittle Joseph24-Aug-06 5:45 
GeneralDoes not work for me... Pinmemberoz_scooter23-Jul-06 20:39 
GeneralRe: Does not work for me... PinmemberTittle Joseph23-Jul-06 21:20 
GeneralFire server side event when clicked on icon. PinmemberTittle Joseph19-Apr-06 4:59 
GeneralHide image if there is no tooltip to display - do following in code PinmemberTittle Joseph19-Apr-06 4:54 
Generalvb integration Pinmembercdotpal15-Mar-06 20:43 
GeneralRe: vb integration PinmemberTittle Joseph15-Mar-06 21:20 
Questionfeedback ? PinmemberTittle Joseph5-Mar-06 22:36 
AnswerRe: feedback ? PinmemberFrancesco Aruta7-Mar-06 8:21 
GeneralRe: feedback ? PinmemberTittle Joseph7-Mar-06 17:43 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140821.2 | Last Updated 6 Mar 2006
Article Copyright 2006 by Tittle Joseph
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid