Using jQuery To Create Stunning Tooltips in your ASP.NET Applications

Posted by: Malcolm Sheridan , on 10/6/2009, in Category jQuery and ASP.NET
Views: 70185
Abstract: The following article demonstrates how to use the jQuery with ASP.NET to create stunning tooltips.
Using jQuery To Create Stunning Tooltips in your ASP.NET Applications
 
I’ve mentioned recently there are tonnes of jQuery plugins on the internet. Well the other day I ran into one that was totally awesome! It’s a plugin called jQuery Tools and can be downloaded from here. The makers of this tool describe it this way:
jQuery Tools is a collection of the most important user interface components for the web. These are tabs and accordions, tooltips, overlays, exposing effects and scrollables. They can dramatically improve the usability and responsiveness of your site. They mainly focus on presenting information and visual appeal. After all, this is exactly what most websites desperately want: to present their content to the reader in an easy and visually pleasing manner.
I’ll be focusing some future articles on these tools, but this article will concentrate on how to create stunning tooltips using this plugin. The end result in this article will show you how to create these tooltips using dynamic data by using jQuery’s Ajax functionality. The end result will look something like this:
ToolTip
Before we get started, this example uses the latest version of jQuery which is 1.3.2. That can be downloaded from here. The jQuery Tools and can be downloaded from here
The jQuery Tools plugin has quite a few options when it comes time to configuration, but the one you should not forget is the tip attribute. This jQuery selector selects the tooltip element being used. The attribute that will allow you to position the tooltip is funnily enough called position. The position property specifies the position in relation to the trigger element. For example, a value of 'bottom center' will place the tooltip on the bottom edge of the trigger, centred horizontally. Other values are:
  • top center, top right, center right, bottom right, bottom left, center left and top left
To make this real, instead of showing this tooltip against static data such as images, I’m going to use jQuery’s Ajax functionality to query the server for a list of running processes. Okay let’s gets started. Open Visual Studio 2008 and create a new Web Application. First off add a new class to the project and call it ProcessInfo. This class will hold information about the process. Add the following code to the class:
C#
public class ProcessInfo
{
public string ProcessName { get; set; }
      public string MainWindowTitle { get; set; }
      public long PagedMemorySize64 { get; set; }
}
VB.NET
Public Class ProcessInfo
Private privateProcessName As String
Public Property ProcessName() As String
      Get
            Return privateProcessName
      End Get
      Set(ByVal value As String)
            privateProcessName = value
      End Set
End Property
       Private privateMainWindowTitle As String
       Public Property MainWindowTitle() As String
             Get
                   Return privateMainWindowTitle
             End Get
             Set(ByVal value As String)
                   privateMainWindowTitle = value
             End Set
       End Property
       Private privatePagedMemorySize64 As Long
       Public Property PagedMemorySize64() As Long
             Get
                   Return privatePagedMemorySize64
             End Get
             Set(ByVal value As Long)
                   privatePagedMemorySize64 = value
             End Set
       End Property
End Class
The next step is to open the Default.aspx.cs file and add the following code:
C#
[WebMethod]
public static List<ProcessInfo> GetRunningProcesses()
{
var query = (from p in System.Diagnostics.Process.GetProcesses()
                  select new ProcessInfo
                  {
                        ProcessName = p.ProcessName,
                        MainWindowTitle = p.MainWindowTitle,
                        PagedMemorySize64 = p.PagedMemorySize64                            
}).ToList();
return query;
} 
VB.NET
<WebMethod> _
Public Shared Function GetRunningProcesses() As List(Of ProcessInfo)
Dim query = ( _
    From p In System.Diagnostics.Process.GetProcesses() _
    Select New ProcessInfo With {.ProcessName = p.ProcessName, .MainWindowTitle = p.MainWindowTitle, .PagedMemorySize64 = p.PagedMemorySize64}).ToList()
Return query
End Function
The code above will be called by jQuery’s Ajax function. It returns a list of running process on the machine thanks to the Process object. The Process class provides access to local and remote processes. The LINQ query will return a generic list of ProcessInfo objects that will be used to create the tooltips. The next step is to add the JavaScript. Open the Default.aspx page and add the following jQuery code to the <head> section of the page. Ideally JavaScript should go to a separate .js file, however for this example; I’ll keep it in the same page:
<script language="javascript" type="text/javascript" src="Scripts/jquery-1.3.2.js"></script>
<script language="javascript" type="text/javascript" src="http://cdn.jquerytools.org/1.1.1/jquery.tools.min.js"></script>
    <script language="javascript" type="text/javascript">
        function showToolTip() {           
            $("#results span[title]").tooltip({
                position: "center right",     
                opacity: 0.7,
                tip: "#demotip",
                effect: "fade"
            });           
        }
 
        $(document).ready(function() {
            $("#btnSearch").click(function() {
                $.ajax({
                    type: "POST",
                    url: "Default.aspx/GetRunningProcesses",
                    data: "{}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    async: true,
                    success: function(msg) {
                        var processInfo = msg.d;
                        $("#results").text("");
                        for (var i = 0; i < processInfo.length; i++) {
                            // create the title for each item
                            var title = "Process&nbsp;Name:&nbsp;" +
                                        processInfo[i].ProcessName +
                                        "&lt;BR&gt;" +
                                        "Paged&nbsp;Memory&nbsp;Size64:&nbsp;" +
                                        processInfo[i].PagedMemorySize64;                           
                            $("#results").append("<span onmouseover=\"showToolTip()\" title=" + title + ">" +
                            processInfo[i].ProcessName +
                            "</span><div id=\"spacer\"></div><br />");
                        }
                    }
                });
            });
        });   
    </script>
 
In the code above I am binding to the input button’s click event. When the user clicks the button, it will execute the WebMethod GetRunningProcesses. A generic list containing the ProcessInfo data will be returned in the msg.d argument. For each process returned, a span tag will be appended in the div element. When the user hover’s their mouse over the tag, the JavaScript function showToolTip will run. This function is responsible for displaying the tooltip:
function showToolTip() {           
$("#results span[title]").tooltip({
position: "center right",     
            opacity: 0.7,
            tip: "#demotip",
            effect: "fade"
      });           
}
Using jQuery’s selectors the tooltip will find the related span tag to trigger the tooltip. The tool looks for the element that is placed next to the tooltip to be the tooltip. The return value is a jQuery object associated with the selection.   The result is a stunning tooltip as the screen shot below shows:
ToolTip
The information in the tooltip can be configured as it’s just HTML. So if you want you can display a nice image to the user so they’ll be able to associate the process by the icon. The background image of the tooltip is configurable too. The styling for the tooltip is below:
 
#demotip {
          display:none;
          background:transparent url(http://flowplayer.org/tools/img/tooltip/black_arrow.png);
          font-size:12px;
          height:70px;
          width:160px;
          padding:25px;
          color:#fff;    
}
 
This is a nice addition to your jQuery ensemble. The entire source code of this article can be downloaded over here 

This article has been editorially reviewed by Suprotim Agarwal.

Absolutely Awesome Book on C# and .NET

C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.

We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).

Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.

Click here to Explore the Table of Contents or Download Sample Chapters!

What Others Are Reading!
Was this article worth reading? Share it with fellow developers too. Thanks!
Share on LinkedIn
Share on Google+

Author
Malcolm Sheridan is a Microsoft awarded MVP in ASP.NET, a Telerik Insider and a regular presenter at conferences and user groups throughout Australia and New Zealand. Being an ASP.NET guy, his focus is on web technologies and has been for the past 10 years. He loves working with ASP.NET MVC these days and also loves getting his hands dirty with jQuery and JavaScript. He also writes technical articles on ASP.NET for SitePoint and other various websites. Follow him on twitter @malcolmsheridan


Page copy protected against web site content infringement 	by Copyscape




Feedback - Leave us some adulation, criticism and everything in between!
Comment posted by mohankan on Tuesday, October 6, 2009 9:28 AM
What is the password for opening the zip file?
Comment posted by Sobin on Tuesday, October 6, 2009 1:39 PM
Hi Malcom, Good article as usual... But one doubt,
Can I show this tooltip to  hyperlink field in a Gridview?
Comment posted by Sobin on Tuesday, October 6, 2009 3:11 PM
Hi Malcom, Good article as usual... But one doubt,
Can I show this tooltip to  hyperlink field in a Gridview?
Comment posted by Malcolm Sheridan on Tuesday, October 6, 2009 6:30 PM
@Sobin
I don't see any reason why you couldn't.  I might do a future article on that!
Comment posted by Miles Gibson on Monday, November 2, 2009 9:16 AM
Love this site, but I don't get the whole password protected download thing.  So where do I get the password?  Not only have I subscribed, but I also shelled out good cash for the 51 tips and tricks.  Is there additional charges required to be paid in order to get the password?
Comment posted by Admin on Wednesday, November 4, 2009 2:57 AM
Miles: We are working on an alternate system for the password. If you have subscribed, you must have received the 'Confirm Subscription link' via email. Just confirm your subscription and you have the password in the mail that follows. It's a one time process.
Comment posted by Sobin on Saturday, January 23, 2010 6:19 AM
Hi Malcom,
This doubt may be silly,How can I change the following line in the style class,

     background:transparent url(http://flowplayer.org/tools/img/tooltip/black_arrow.png);

so that the url points to my own application's image folder and image file?

Comment posted by Mauri on Thursday, June 13, 2013 4:21 PM
So hard to study but beuatiful effect.

http://www.custodiestensi.it

Categories

JOIN OUR COMMUNITY

POPULAR ARTICLES

C# .NET BOOK

C# Book for Building Concepts and Interviews

Tags

JQUERY COOKBOOK

jQuery CookBook