ToolTip AJAX Client Control

Gokuldas

Rate me:

4.40/5 (4 votes)

7 Dec 2008CPOL3 min read

A general purpose tooltip control using ASP.NET AJAX.

Download source code - 7.33 KB

Introduction

Many of you might have seen a tooltip as shown in above screenshot. The purpose of this article is to show how we can leverage the Microsoft ASP.NET AJAX framework to develop a general purpose AJAX ToolTip Client Control. You can associate this control to any of the commonly used controls such as textboxes, images etc., to display appropriate tooltips.

Background

Recently, I was exploring the ASP.NET AJAX features, and came across an excellent book: ASP.NET In Action, by Alessandro Gallo. I feel it is an excellent reference for all those who want to learn and know in depth about ASP.NET AJAX. After reading the chapter on developing ASP.NET AJAX Client Controls, I decided to build a general purpose ToolTip control which I had seen on many websites and was curious to build. The rest of the document will explain the actual implementation.

The tooltip control is built using two simple DOM elements <div> and <p>. In the sample presented here, I have associated it to a simple textbox control.

Using the code

The constructor of the control is shown below:

// Register namespace.
Type.registerNamespace("AjaxClientComponent");
// Constructor
AjaxClientComponent.ToolTipTextBox = function(element) {
    AjaxClientComponent.ToolTipTextBox.initializeBase(this, [element]);
    // define private variables
    this._container=null;
    this._divElement=null;
    this._pElement=null;
    this._toolTip =null;
    this._cssClass =null;
}

If you look at above JavaScript code, the _container variable is used to initialize it with the container element which contains all the controls with which we can associate the appropriate tooltip. _divElement and _pElement variables are initialised to assign a dynamic <div> tag and a <p> tag created as part of the initialization process. The _toolTip variable is used to initialise the tooltip text to be displayed, and _cssClass is the CSS class which has styles defined for tooltip elements to display and hide, as well as to give the look and feel as shown above.

All the associated properties, methods, and event handlers of this class are initialized using a prototype object of ToolTipTextBox:

// Define Methods,properties and event handlers here
AjaxClientComponent.ToolTipTextBox.prototype = { initialize: function() 
{
    AjaxClientComponent.ToolTipTextBox.callBaseMethod(this, 'initialize'); 
    // Add custom initialization here

    //create div and p tag dynamically
    this._divElement = document.createElement('div');
    this._pElement = document.createElement('p'); 
    this._pElement.innerHTML =this._toolTip;

    // assign css class the <p> tag
    Sys.UI.DomElement.addCssClass(this._pElement,'tipText');

    // Hide the tooltip
     this._cssClass ="hidenotes";
    Sys.UI.DomElement.addCssClass(this._divElement,this._cssClass);
        
     this._divElement.appendChild(this._pElement);
    // add the <div> element to the container
    $get(this._container).appendChild(this._divElement); 

    // add event handlers here 
    $addHandlers(this.get_element(),
    {
       mousemove:this._onMouseover, 
         mouseout:this._onMouseout

    },
    this);
},
   
    // Dispose method
    dispose: function() {
        //Add custom dispose actions here
        $clearHandlers(this.get_element()); 
        AjaxClientComponent.ToolTipTextBox.callBaseMethod(this, 'dispose'); 
    },
 
    // Define all event handlers here
    // MouseMovw Event handler
    _onMouseover:function(evt){

    if(this._divElement!=null){
        // Show the tooltip by changing the class of div element.
        if(this._cssClass=='hidenotes'){ 
            Sys.UI.DomElement.removeCssClass(this._divElement,this._cssClass); 
            this._cssClass='notes'; 
            Sys.UI.DomElement.addCssClass(this._divElement,this._cssClass); 
        }

        this._divElement.style.left=evt.clientX; 
        this._divElement.style.top=evt.clientY+5;
    },

    // Mouseout Event handler
    _onMouseout:function(evt){ 
    if(this._divElement!=null)
    { 
        if(this._cssClass!=null)
        {
            Sys.UI.DomElement.removeCssClass(this._divElement,this._cssClass); 
            this._cssClass='hidenotes';
            Sys.UI.DomElement.addCssClass(this._divElement,this._cssClass);
        }
    }
},    

   //properties 
   // Define set and get methods for initialising tooltip text

   get_toolTip: function() {
     return this._toolTip;
   },

   set_toolTip: function(value) {
     this._toolTip=value; 
   },
   // get and set methods for container element

   get_container:function() {
     return this._container; 
   }, 

   set_container:function(value) {
     this._container=value;
   } 
}

If you look at above code snippet, the initialize() method creates the <div> and <p> tags dynamically, and assigns the CSS class to them, and then adds them as children of the container element. It adds the event handlers for the mousemove and mouseout events of the element with which the tooltip will be associated with. Two CSS classes notes and hidenotes show and hide the tooltip, respectively.

The _onMousemove() method shows the tooltip by assigning the notes CSS class to _divElement, and it also initializes the left and top properties based on the mouse client coordinates passed as event argument to the evt object.

The _onMouseout() method hides the tooltip by assigning the hidenotes CSS class to _divElement.

Rest of the properties are self explanatory.

Now, let us see the code from the default.aspx file to see how the above control is invoked.

JavaScript

<script type='text/javascript' language ="'javascript">
Sys.Application.add_init(page_init);
        
function page_init(sender,e){
  $create(AjaxClientComponent.ToolTipTextBox,
  {
    'toolTip':'Please enter your first name',
    'container':'container'
  }
  
  ,{},{},$get('firstName'));
  $create(AjaxClientComponent.ToolTipTextBox,
  {
    'toolTip':'Please enter your last name',
    'container':'container'
  }
  
  ,{},{},$get('lastName'));
  $create(AjaxClientComponent.ToolTipTextBox,
  {
    'toolTip':'Enter your address here',
    'container':'container'
  }
  
  ,{},{},$get('address'));

}

</script>

All the details of the default.aspx file are not shown here, and focus is mainly to explain how the control is invoked. The ScriptManager control is used inside the default.aspx file, and has a reference to ToolTipTextbox.js which has the implementation details of the tooltip control. The control is initialized in the page_init() method, and associates the tooltip control with three input elements.

I recommend readers to download the code using the link shown at the top of the document to see the detailed implementation.

Conclusion

We saw how easy it is to implement and build AJAX Client Controls by leveraging the power of the ASP.NET AJAX framework and JavaScript The source code zip contains the implementation details with a test ASPX file which invokes the control. Please download it and see the working demo. If you face any difficulties, please contact me at gokuldasc@yahoo.com. Good luck!!!

My other articles

License

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

Written By

Gokuldas

Software Developer (Senior)

United Kingdom

I am Solution Architect with 20+ years of IT experience in the field of real time,embedded,client/server and web based applications and Business Intelligence . I am currently working as Senior Consultant for Infor.

Imports System.Collections.Generic ''' <summary> ''' Provides programmatic access to the wz_tooltip.js library. See http://www.walterzorn.com/tooltip/tooltip_e.htm for complete details. ''' Call Page.ClientScript.RegisterStartupScript(GetType(String), "ScriptKeyName", WZToolTip.GetClientScriptIncludes(True, WZToolTip.BalloonColor.LightBlue), False) ''' in Page_Load and the js and image references will be handled for you. ''' </summary> ''' <remarks></remarks> Public Class WZToolTip #Region " Fields and Enums " Private _tipText As String = "" Private _above As Boolean = False Private _bgColor As String = "#E4E7FF" Private _bgImage As String = "" Private _borderColor As String = "#002299" Private _borderStyle As String = "solid" Private _borderWidth As Integer = 1 Private _centerMouse As Boolean = False Private _clickClose As Boolean = False Private _closeButton As Boolean = False Private _closeButtonText As String = " X " Private _closeButtonColors As CloseButtonColors Private _copyContent As CopyContent Private _delay As Integer = 400 Private _duration As Integer = 0 Private _fadeIn As Integer = 0 Private _fadeOut As Integer = 0 Private _fix As FixedCoordinate Private _followMouse As Boolean = True Private _fontColor As String = "#000044" Private _fontFamily As String = "Verdana,Geneva,sans-serif" Private _fontSize As String = "8pt" Private _fontWeight As FontWeight Private _left As Boolean = False Private _offsetX As Integer = 14 Private _offsetY As Integer = 8 Private _opacity As Integer = 100 Private _padding As Integer = 3 Private _shadow As Boolean = False Private _shadowColor As String = "#C0C0C0" Private _shadowWidth As Integer = 5 Private _sticky As Boolean = False Private _textAlign As Align Private _title As String = "" Private _titleAlign As Align Private _titleBGColor As String = "" Private _titleFontColor As String = "#ffffff" Private _titleFontFamily As String = "" Private _titleFontSize As String = "" Private _width As Integer = 0 Private _tip As StringBuilder Private _properties As ArrayList Private _listItemProps As ListItemCollection Private _balloon As Boolean = False Private _followScroll As Boolean = False Private _centerWindow As Boolean = False Private _centerAlways As Boolean = False Enum BalloonColor Blue = 0 LightBlue = 1 Manilla = 2 End Enum #End Region #Region " Properties " ''' <summary> ''' Keeps the tooltip at its position in the window's clientarea even if the window is scrolled. Applying true to this property ''' automatically sets the Sticky property to true because it is required. A reference on the page to tip_followscroll.js is required. ''' </summary> ''' <value></value> ''' <returns></returns> ''' <remarks></remarks> Public Property FollowScroll() As Boolean Get Return _followScroll End Get Set(ByVal value As Boolean) _followScroll = value Sticky = value SetListItemProperty("FOLLOWSCROLL, ", _followScroll.ToString().ToLower()) End Set End Property ''' <summary> ''' Centers the tooltip inside the window's clientarea. Applying true to this property automatically sets the Sticky ''' property to True as it is required. A reference on the page to tip_centerwindow.js is required. ''' </summary> ''' <value></value> ''' <returns></returns> ''' <remarks></remarks> Public Property CenterWindow() As Boolean Get Return _centerWindow End Get Set(ByVal value As Boolean) _centerWindow = value Sticky = value SetListItemProperty("CENTERWINDOW, ", _centerWindow.ToString().ToLower()) End Set End Property ''' <summary> ''' Keeps the tooltip centered in the window's clientarea even if the window is scrolled or resized. Only has an effect if used with ''' CENTERWINDOW = True. ''' </summary> ''' <value></value> ''' <returns></returns> ''' <remarks></remarks> Public Property CenterAlways() As Boolean Get Return _centerAlways End Get Set(ByVal value As Boolean) _centerAlways = value SetListItemProperty("CENTERALWAYS, ", _centerAlways.ToString().ToLower()) End Set End Property ''' <summary> ''' If True, shows the tooltip as a balloon or callout shape. A reference on the page to tip_balloon_(color).js is required. ''' </summary> ''' <value></value> ''' <returns></returns> ''' <remarks></remarks> Public Property Balloon() As Boolean Get Return _balloon End Get Set(ByVal value As Boolean) _balloon = value SetListItemProperty("BALLOON, ", _balloon.ToString().ToLower()) End Set End Property ''' <summary> ''' Sets the tooltip text ''' </summary> ''' <value></value> ''' <returns></returns> ''' <remarks></remarks> Public Property TipText() As String Get Return _tipText End Get Set(ByVal value As String) _tipText = value.Replace("'", "\'") _tipText = _tipText.Replace(Chr(&HD) & Chr(&HA), "<br/>") _tipText = _tipText.Replace(vbCrLf, "<br/>") If Not _tipText.Contains("<br/>") And _tipText.Length > 66 Then _tipText = clsUtil.WrapTextAt(_tipText, "<br/>", 66) End If End Set End Property ''' <summary> ''' Determines if the tooltip should be shown above the mouse cursor ''' </summary> ''' <value></value> ''' <returns></returns> ''' <remarks></remarks> Public Property Above() As Boolean Get Return _above End Get Set(ByVal value As Boolean) _above = value SetListItemProperty("ABOVE, ", _above.ToString().ToLower()) End Set End Property ''' <summary> ''' Sets the background color of the tooltip. Default value is: "#E4E7FF" ''' </summary> ''' <value></value> ''' <returns></returns> ''' <remarks></remarks> Public Property BGColor() As String Get Return _bgColor End Get Set(ByVal value As String) _bgColor = value.Replace("'", "") SetListItemProperty("BGCOLOR, ", "'" & _bgColor & "'") End Set End Property ''' <summary> ''' Sets the url for the Background Image on the WZToolTip. Default value is: "" ''' </summary> ''' <value></value> ''' <returns></returns> ''' <remarks></remarks> Public Property BGImage() As String Get Return _bgImage End Get Set(ByVal value As String) _bgImage = value.Replace("'", "") SetListItemProperty("BGIMG, ", "'" & _bgImage & "'") End Set End Property ''' <summary> ''' Sets the Border Color for the WZToolTip. Default value is: "#002299" ''' </summary> ''' <value></value> ''' <returns></returns> ''' <remarks></remarks> Public Property BorderColor() As String Get Return _borderColor End Get Set(ByVal value As String) _borderColor = value.Replace("'", "") SetListItemProperty("BORDERCOLOR, ", "'" & _borderColor & "'") End Set End Property ''' <summary> ''' Sets the Border Style for the WZToolTip. Default value is: "solid" ''' </summary> ''' <value></value> ''' <returns></returns> ''' <remarks></remarks> Public Property BorderStyle() As String Get Return _borderStyle End Get Set(ByVal value As String) _borderStyle = value.Replace("'", "") SetListItemProperty("BORDERSTYLE, ", "'" & value.ToLower() & "'") End Set End Property ''' <summary> ''' Sets the Border Width for the WZToolTip. Default value is: 1 ''' </summary> ''' <value></value> ''' <returns></returns> ''' <remarks></remarks> Public Property BorderWidth() As Integer Get Return _borderWidth End Get Set(ByVal value As Integer) _borderWidth = value SetListItemProperty("BORDERWIDTH, ", _borderWidth.ToString()) End Set End Property ''' <summary> ''' If True, centers the tooltip on the mouse pointer. Default value is: False ''' </summary> ''' <value></value> ''' <returns></returns> ''' <remarks></remarks> Public Property CenterMouse() As Boolean Get Return _centerMouse End Get Set(ByVal value As Boolean) _centerMouse = value SetListItemProperty("CENTERMOUSE, ", _centerMouse.ToString().ToLower()) End Set End Property ''' <summary> ''' Closes the tooltip once the user clicks somewhere inside the tooltip or into the document. Default value is: False. ''' </summary> ''' <value></value> ''' <returns></returns> ''' <remarks></remarks> Public Property ClickClose() As Boolean Get Return _clickClose End Get Set(ByVal value As Boolean) _clickClose = value SetListItemProperty("CLICKCLOSE, ", _clickClose.ToString().ToLower()) End Set End Property ''' <summary> ''' Displays a closebutton in the titlebar. Default value is: False. Setting this property to True also sets the Sticky property to true ''' as it is required. ''' </summary> ''' <value></value> ''' <returns></returns> ''' <remarks></remarks> Public Property CloseButton() As Boolean Get Return _closeButton End Get Set(ByVal value As Boolean) _closeButton = value Sticky = value SetListItemProperty("CLOSEBTN, ", _closeButton.ToString().ToLower()) End Set End Property ''' <summary> ''' Sets an array of colors for the Close Button. See the CloseButtonColors class for more information. ''' </summary> ''' <value></value> ''' <returns></returns> ''' <remarks></remarks> Public Property CloseButtonColors() As CloseButtonColors Get Return _closeButtonColors End Get Set(ByVal value As CloseButtonColors) _closeButtonColors = value SetTypeNameProperty(_closeButtonColors) End Set End Property ''' <summary> ''' Sets the close button text. Default value is 'X'. You can also set this value to an image tag. ''' </summary> ''' <value></value> ''' <returns></returns> ''' <remarks></remarks> Public Property CloseButtonText() As String Get Return _closeButtonText End Get Set(ByVal value As String) _closeButtonText = value.Replace("'", "\'") SetListItemProperty("CLOSEBTNTEXT, ", "'" & _closeButtonText & "'") End Set End Property ''' <summary> ''' Sets a control ID and a boolean to determine if the entire tag should be made into a tooltip or just the InnerHTML (Default is: True). ''' See http://www.walterzorn.com/tooltip/tooltip_e.htm#download for more information. ''' </summary> ''' <value></value> ''' <returns></returns> ''' <remarks></remarks> Public Property CopyContent() As CopyContent Get Return _copyContent End Get Set(ByVal value As CopyContent) _copyContent = value SetTypeNameProperty(_copyContent) End Set End Property ''' <summary> ''' Tooltip shows up after the specified timeout, in milliseconds. A behavior similar to OS based tooltips Default is: 400 ''' </summary> ''' <value></value> ''' <returns></returns> ''' <remarks></remarks> Public Property Delay() As Integer Get Return _delay End Get Set(ByVal value As Integer) _delay = value SetListItemProperty("DELAY, ", _delay.ToString()) End Set End Property ''' <summary> ''' Time span, in milliseconds, until the tooltip will be hidden, even if the STICKY command has been applied, ''' or even if the mouse is still on the HTML element that has triggered the tooltip. Default value is: 0 ''' </summary> ''' <value></value> ''' <returns></returns> ''' <remarks></remarks> Public Property Duration() As Integer Get Return _duration End Get Set(ByVal value As Integer) _duration = value SetListItemProperty("DURATION, ", _duration.ToString()) End Set End Property ''' <summary> ''' Fade-in animation. The value specifies the duration of the animation, in milliseconds. 0 for no animation. Default value is: 0 ''' </summary> ''' <value></value> ''' <returns></returns> ''' <remarks></remarks> Public Property FadeIn() As Integer Get Return _fadeIn End Get Set(ByVal value As Integer) _fadeIn = value SetListItemProperty("FADEIN, ", _fadeIn.ToString()) End Set End Property ''' <summary> ''' Fade-out animation. The value specifies the duration of the animation, in milliseconds. 0 for no animation. Default value is: 0 ''' </summary> ''' <value></value> ''' <returns></returns> ''' <remarks></remarks> Public Property FadeOut() As Integer Get Return _fadeOut End Get Set(ByVal value As Integer) _fadeOut = value SetListItemProperty("FADEOUT, ", _fadeOut.ToString()) End Set End Property ''' <summary> ''' Shows the tooltip at the fixed coordinates [x, y]. You can also call function(s) defined elsewhere that calculate the coordinates dynamically: ''' Example: onmouseover="Tip('Text', FIX, [CalcFixX(), CalcFixY()], BORDERWIDTH, 2)" ''' OR ''' onmouseover="Tip('Text', FIX, CalcFixXY(), ABOVE, true)" ''' In the latter example, the function CalcFixXY() must return an array containing the two numbers. ''' </summary> ''' <value></value> ''' <returns></returns> ''' <remarks></remarks> Public Property FixedCoordinates() As FixedCoordinate Get Return _fix End Get Set(ByVal value As FixedCoordinate) _fix = value SetTypeNameProperty(_fix) End Set End Property ''' <summary> ''' The tooltip follows the movements of the mouse. Default: True ''' </summary> ''' <value></value> ''' <returns></returns> ''' <remarks></remarks> Public Property FollowMouse() As Boolean Get Return _followMouse End Get Set(ByVal value As Boolean) _followMouse = value SetListItemProperty("FOLLOWMOUSE, ", _followMouse.ToString().ToLower()) End Set End Property ''' <summary> ''' Font color. Value: HTML color. Default is: "#000044" ''' </summary> ''' <value></value> ''' <returns></returns> ''' <remarks></remarks> Public Property FontColor() As String Get Return _fontColor End Get Set(ByVal value As String) _fontColor = value.Replace("'", "") SetListItemProperty("FONTCOLOR, ", "'" & _fontColor & "'") End Set End Property ''' <summary> ''' Font Family as you'd specify it in HTML or CSS. Default value: "Verdana,Geneva,sans-serif" ''' </summary> ''' <value></value> ''' <returns></returns> ''' <remarks></remarks> Public Property FontFamily() As String Get Return _fontFamily End Get Set(ByVal value As String) _fontFamily = value.Replace("'", "") SetListItemProperty("FONTFACE, ", "'" & _fontFamily & "'") End Set End Property ''' <summary> ''' Size with unit. Unit ('px', 'pt', 'em' etc.) is mandatory. Default is: "8pt" ''' </summary> ''' <value></value> ''' <returns></returns> ''' <remarks></remarks> Public Property FontSize() As String Get Return _fontSize End Get Set(ByVal value As String) _fontSize = value.Replace("'", "") SetListItemProperty("FONTSIZE, ", "'" & _fontSize & "'") End Set End Property ''' <summary> ''' Normal or Bold. Default is "normal" ''' </summary> ''' <value></value> ''' <returns></returns> ''' <remarks></remarks> Public Property FontWeight() As FontWeight Get Return _fontWeight End Get Set(ByVal value As FontWeight) _fontWeight = value SetTypeNameProperty(_fontWeight) End Set End Property ''' <summary> ''' Tooltip positioned on the left side of the mousepointer. Default is: False. ''' </summary> ''' <value></value> ''' <returns></returns> ''' <remarks></remarks> Public Property Left() As Boolean Get Return _left End Get Set(ByVal value As Boolean) _left = value SetListItemProperty("LEFT, ", _left.ToString().ToLower()) End Set End Property ''' <summary> ''' Horizontal offset from mouse-pointer. Value: Any integer. May also be negative. Default is 14 ''' </summary> ''' <value></value> ''' <returns></returns> ''' <remarks></remarks> Public Property OffsetX() As Integer Get Return _offsetX End Get Set(ByVal value As Integer) _offsetX = value SetListItemProperty("OFFSETX, ", _offsetX.ToString()) End Set End Property ''' <summary> ''' Vertical offset from the mouse-pointer. Value: Any integer. May also be negative. Default is: 8 ''' </summary> ''' <value></value> ''' <returns></returns> ''' <remarks></remarks> Public Property OffsetY() As Integer Get Return _offsetY End Get Set(ByVal value As Integer) _offsetY = value SetListItemProperty("OFFSETY, ", _offsetY.ToString()) End Set End Property ''' <summary> ''' Opacity is the opposite of transparency. i.e. opacity = 100 - transparency (in percent). Default is: 100 ''' </summary> ''' <value></value> ''' <returns></returns> ''' <remarks></remarks> Public Property Opacity() As Integer Get If _opacity > 100 Then Return 100 Else Return _opacity End If End Get Set(ByVal value As Integer) If Not value < 0 Then _opacity = value Else _opacity = 0 End If SetListItemProperty("OPACITY, ", _opacity.ToString()) End Set End Property ''' <summary> ''' Inner spacing of tooltip, between border and content. Default is: 3 ''' </summary> ''' <value></value> ''' <returns></returns> ''' <remarks></remarks> Public Property Padding() As Integer Get Return _padding End Get Set(ByVal value As Integer) _padding = value SetListItemProperty("PADDING, ", _padding.ToString()) End Set End Property ''' <summary> ''' Tooltip drops a shadow. Default is: False. If combined with Opacity that is less than 100 the Shadow does not show. ''' </summary> ''' <value></value> ''' <returns></returns> ''' <remarks></remarks> Public Property Shadow() As Boolean Get Return _shadow End Get Set(ByVal value As Boolean) _shadow = value SetListItemProperty("SHADOW, ", _shadow.ToString().ToLower()) End Set End Property ''' <summary> ''' Shadow color. Value: HTML color. Default is: "#C0C0C0" ''' </summary> ''' <value></value> ''' <returns></returns> ''' <remarks></remarks> Public Property ShadowColor() As String Get If String.IsNullOrEmpty(_shadowColor) Then Return "#C0C0C0" End If Return _shadowColor End Get Set(ByVal value As String) _shadowColor = value.Replace("'", "") SetListItemProperty("SHADOWCOLOR, ", "'" & _shadowColor & "'") End Set End Property ''' <summary> ''' Shadow width (offset). Default is: 5 ''' </summary> ''' <value></value> ''' <returns></returns> ''' <remarks></remarks> Public Property ShadowWidth() As Integer Get If _shadowWidth = 0 Then Return 5 End If Return _shadowWidth End Get Set(ByVal value As Integer) _shadowWidth = value SetListItemProperty("SHADOWWIDTH, ", _shadowWidth.ToString()) End Set End Property ''' <summary> ''' The tooltip stays fixed at its initial position until another tooltip pops up. Default is: False. ''' When combined with Duration you can force the tooltip to disappear after a certain time span. ''' </summary> ''' <value></value> ''' <returns></returns> ''' <remarks></remarks> Public Property Sticky() As Boolean Get Return _sticky End Get Set(ByVal value As Boolean) _sticky = value SetListItemProperty("STICKY, ", _sticky.ToString().ToLower()) End Set End Property ''' <summary> ''' Aligns the text in the body of the tooltip. Value: "right", "center", "justify" or "left". Default is: "left". ''' </summary> ''' <value></value> ''' <returns></returns> ''' <remarks></remarks> Public Property TextAlign() As Align Get Return _textAlign End Get Set(ByVal value As Align) _textAlign = value SetTypeNameProperty(_textAlign) End Set End Property ''' <summary> ''' Display a titlebar. Value: Text to display. May even contain HTML, which gives you additional freedom in fashioning the titlebar ''' </summary> ''' <value></value> ''' <returns></returns> ''' <remarks></remarks> Public Property Title() As String Get Return _title End Get Set(ByVal value As String) _title = value.Replace("'", "\'") SetListItemProperty("TITLE, ", "'" & _title & "'") End Set End Property ''' <summary> ''' Aligns the text in the titlebar. Value: 'right', 'center', 'justify' or 'left'. Default is 'left'. ''' </summary> ''' <value></value> ''' <returns></returns> ''' <remarks></remarks> Public Property TitleAlign() As Align Get Return _titleAlign End Get Set(ByVal value As Align) _titleAlign = value SetTypeNameProperty(_titleAlign) End Set End Property ''' <summary> ''' Backgroundcolor of the titlebar. Value: HTML color, in single quotes. If it's an empty string '', ''' the border color (see also BORDERCOLOR command) is used (this is the default). ''' </summary> ''' <value></value> ''' <returns></returns> ''' <remarks></remarks> Public Property TitleBackgroundColor() As String Get Return _titleBGColor End Get Set(ByVal value As String) _titleBGColor = value.Replace("'", "") SetListItemProperty("TITLEBGCOLOR, ", "'" & _titleBGColor & "'") End Set End Property ''' <summary> ''' Color of title text. Value: HTML color, in single quotes. If it's an empty string '', ''' the backgroundcolor of the tooltip body (see also BGCOLOR command) is used (this is the default). ''' </summary> ''' <value></value> ''' <returns></returns> ''' <remarks></remarks> Public Property TitleFontColor() As String Get Return _titleFontColor End Get Set(ByVal value As String) _titleFontColor = value.Replace("'", "") SetListItemProperty("TITLEFONTCOLOR, ", "'" & _titleFontColor & "'") End Set End Property ''' <summary> ''' Font Family for title text. Value: Like in HTML or CSS. If the value is an empty string '', ''' the tooltip body font, in boldified form, is used (this is the default). ''' </summary> ''' <value></value> ''' <returns></returns> ''' <remarks></remarks> Public Property TitleFontFamily() As String Get If String.IsNullOrEmpty(_titleFontFamily) Then Return _fontFamily End If Return _titleFontFamily End Get Set(ByVal value As String) _titleFontFamily = value.Replace("'", "") SetListItemProperty("TITLEFONTFACE, ", "'" & _titleFontFamily & "'") End Set End Property ''' <summary> ''' Font size of title text. Value: Size with unit, in single quotes. Unit ('px', 'pt', 'em' etc.) is mandatory. ''' If the value is an empty string '', the fontsize of the tooltip body is applied. ''' </summary> ''' <value></value> ''' <returns></returns> ''' <remarks></remarks> Public Property TitleFontSize() As String Get If String.IsNullOrEmpty(_titleFontSize) Then Return _fontSize End If Return _titleFontSize End Get Set(ByVal value As String) _titleFontSize = value.Replace("'", "") SetListItemProperty("TITLEFONTSIZE, ", "'" & _titleFontSize & "'") End Set End Property ''' <summary> ''' Width of tooltip. If 0 (the default), the width is automatically adapted to the content of the tooltip. ''' NOTE: The tooltips follow the W3C box model, which means that the specified width applies to the actual ''' content of the tooltip, excluding padding (see PADDING command), border and shadow. ''' </summary> ''' <value></value> ''' <returns></returns> ''' <remarks></remarks> Public Property Width() As Integer Get Return _width End Get Set(ByVal value As Integer) _width = value SetListItemProperty("WIDTH, ", _width.ToString()) End Set End Property ''' <summary> ''' Gets or sets the string of the tooltip. ''' </summary> Public Property Tip() As String Get Return GetTip() End Get Set(ByVal value As String) _tip.Length = 0 _tip.Append(value) End Set End Property #End Region #Region " Methods " ''' <summary> ''' CTOR for WZToolTip. ''' </summary> ''' <param name="ttipText"></param> ''' <remarks></remarks> Public Sub New(Optional ByVal ttipText As String = " ") TipText = ttipText _tip = New StringBuilder() _properties = New ArrayList() _copyContent = New CopyContent _fix = New FixedCoordinate _closeButtonColors = New CloseButtonColors _textAlign = New Align(Align.eAlignType.TextAlign, Align.AlignValue.Left) _titleAlign = New Align(Align.eAlignType.TitleAlign, Align.AlignValue.Left) _listItemProps = New ListItemCollection() End Sub ''' <summary> ''' Adds changed properties to an internal collection for tracking and rendering. ''' </summary> ''' <param name="propertyName"></param> ''' <param name="propertyValue"></param> ''' <remarks></remarks> Private Sub SetListItemProperty(ByVal propertyName As String, ByVal propertyValue As String) Dim item As ListItem = _listItemProps.FindByText(propertyName) If item Is Nothing Then item = New ListItem(propertyName, propertyValue) _listItemProps.Add(item) Else item.Value = propertyValue End If If Not item Is Nothing Then If Not _properties.Contains(item) Then _properties.Add(item) Else For Each obj As Object In _properties If TypeOf (obj) Is ListItem Then Dim pItem As ListItem = DirectCast(obj, ListItem) If Not pItem Is Nothing Then If pItem.Text = propertyName Then pItem.Value = item.Value Exit For End If End If End If Next End If End If End Sub Private Sub SetTypeNameProperty(ByVal classType As Object) Dim found As Boolean = False Dim name As String = classType.GetType().Name For Each obj As Object In _properties If obj.GetType().Name = name Then If Not name = "Align" Then obj = classType found = True Else Dim al As Align = obj Dim al2 As Align = DirectCast(classType, Align) If al.AlignType = al2.AlignType Then obj = classType found = True End If End If End If Next If Not found Then _properties.Add(classType) End If End Sub ''' <summary> ''' Produces the text needed to show a tooltip. ''' Example: ''' Dim wz as New WZToolTip("Some Text") ''' Dim anch as New HtmlAnchor() ''' anch.Attributes("mouseover") = wz.GetTip() ''' </summary> ''' <returns></returns> ''' <remarks></remarks> Public Function GetTip() As String Dim objectName As String = "" Dim paramItem As ListItem Dim algn As Align Dim fixedCoord As FixedCoordinate Dim fntWeight As FontWeight Dim cBtnColors As CloseButtonColors _tip.Length = 0 If Not CopyContent.ControlID.Length = 0 Then ' See comments on the CopyContent class for example usage. _tip.Append("TagToTip('" & CopyContent.ControlID & "'") Else _tip.Append("Tip('" & TipText & "'") End If For Each obj As Object In _properties Try objectName = obj.GetType().Name _tip.Append(", ") Select Case objectName Case "ListItem" paramItem = DirectCast(obj, ListItem) _tip.Append(paramItem.Text & paramItem.Value) Case "Align" algn = DirectCast(obj, Align) _tip.Append(algn.GetValue()) Case "FixedCoordinate" fixedCoord = DirectCast(obj, FixedCoordinate) _tip.Append(fixedCoord.GetValue()) Case "FontWeight" fntWeight = DirectCast(obj, FontWeight) _tip.Append(fntWeight.GetValue()) Case "CloseButtonColors" cBtnColors = DirectCast(obj, CloseButtonColors) _tip.Append(cBtnColors.GetValue()) Case "CopyContent" _tip.Append("COPYCONTENT, " & CopyContent.CopyInnerHTML.ToString.ToLower) End Select Catch ex As Exception End Try Next Dim tipString As String = _tip.ToString().Trim() tipString = tipString.TrimEnd(Convert.ToChar(",")) tipString += ");" _tip.Length = 0 _tip.Append(tipString) Return _tip.ToString() End Function ''' <summary> ''' Gets an HTML anchor with the text you specify and sets it's mouseover event equal to the value returned by GetTip(). Clicking the link ''' this anchor creates does nothing. ''' </summary> ''' <param name="displayText"></param> ''' <returns></returns> ''' <remarks></remarks> Public Function GetAnchorTip(ByVal displayText As String, Optional ByVal styleString As String = "text-decoration: none; border: 0;") As String Dim lnk As String = "<a href='javascript:void(0);' style='" & styleString & "' onmouseover=""" & GetTip() & """>" & displayText & "</a>" Return lnk End Function Public Function GetImageTip(ByVal imageSrc As String, Optional ByVal styleString As String = "text-decoration: none; border: 0;") As String Dim lnk As String = "<img src='" & imageSrc & "' style='" & styleString & "' onmouseover=""" & GetTip() & """ alt=''/>" Return lnk End Function ''' <summary> ''' Attaches the tooltip to the mouseover event of an System.Web.UI.WebControls.WebControl or HtmlControl ''' </summary> ''' <param name="control"></param> ''' <returns></returns> ''' <remarks></remarks> Public Function AttachMouseOver(ByVal control As Object) As Object Dim webControl As System.Web.UI.WebControls.WebControl Dim htmlControl As System.Web.UI.HtmlControls.HtmlControl Dim htmlGenControl As System.Web.UI.HtmlControls.HtmlGenericControl Try If TypeOf (control) Is WebControl Then webControl = DirectCast(control, WebControl) If Not webControl Is Nothing Then webControl.Attributes("onmouseover") = GetTip() End If Return webControl Else If TypeOf (control) Is HtmlControl Then htmlControl = DirectCast(control, HtmlControl) If Not htmlControl Is Nothing Then htmlControl.Attributes("onmouseover") = GetTip() End If Return htmlControl ElseIf TypeOf (control) Is HtmlGenericControl Then htmlGenControl = DirectCast(control, HtmlGenericControl) If Not htmlGenControl Is Nothing Then htmlGenControl.Attributes("onmouseover") = GetTip() End If Return htmlGenControl End If End If Catch ex As Exception Return Nothing End Try Return Nothing End Function ''' <summary> ''' Returns a startup script for the baloon image path. The script tags are included. ''' </summary> ''' <param name="color"></param> ''' <remarks></remarks> Public Shared Function GetBalloonImagePathStartUpScript(ByVal color As BalloonColor, Optional ByVal applicationRoot As String = "") As String Dim tagStart As String = "<script language='javascript' type='text/javascript'>" Dim tagEnd As String = "</script>" Dim mainDirectory As String = "/javascript" Dim imgDirectory As String = "" Dim config As String = " config. BalloonImgPath = '" Dim sb As New StringBuilder() If applicationRoot.Length = 0 Then applicationRoot = clsUtil.GetRootUrl End If sb.Append(tagStart) sb.Append(config) sb.Append(applicationRoot) sb.Append(mainDirectory) Select Case color Case BalloonColor.Blue imgDirectory = "/tip_balloon_blue';" Case BalloonColor.LightBlue imgDirectory = "/tip_balloon_lightblue';" Case BalloonColor.Manilla imgDirectory = "/tip_balloon_manilla';" Case Else imgDirectory = "/tip_balloon_lightblue';" End Select sb.Append(imgDirectory) sb.Append(" Balloon_PreCacheDefImgs();") sb.Append(tagEnd) Return sb.ToString End Function ''' <summary> ''' Returns the startup script blocks required when using the WZToolTip library. The script tags are included. ''' </summary> ''' <param name="IncludeBalloon"></param> ''' <param name="color"></param> ''' <returns></returns> ''' <remarks></remarks> Public Shared Function GetClientScriptIncludes(ByVal IncludeBalloon As Boolean, Optional ByVal color As BalloonColor = BalloonColor.LightBlue) As String Dim sb As StringBuilder = New StringBuilder() Dim appRoot As String = GetRootUrl Dim mainJs As String = "/javascript/wz_tooltip.js'" Dim balloonJs As String = "" Dim tagStart As String = "<script language='javascript' type='text/javascript' src='" Dim tagEnd As String = "></script>" sb.Append(tagStart) sb.Append(appRoot) sb.Append(mainJs) sb.Append(tagEnd) If IncludeBalloon Then sb.Append(tagStart) sb.Append(appRoot) Select Case color Case BalloonColor.Blue balloonJs = "/javascript/tip_balloon_blue.js'" Case BalloonColor.LightBlue balloonJs = "/javascript/tip_balloon_lightblue.js'" Case BalloonColor.Manilla balloonJs = "/javascript/tip_balloon_manilla.js'" Case Else balloonJs = "/javascript/tip_balloon_lightblue.js'" End Select sb.Append(balloonJs) sb.Append(tagEnd) sb.Append(GetBalloonImagePathStartUpScript(color, appRoot)) End If Return sb.ToString End Function ''' <summary> ''' Returns the fully qualified Url of the application including the protocol, the server name, the port, and the application path. ''' </summary> ''' <returns>string</returns> ''' <remarks></remarks> Public Shared Function GetRootUrl() As String Dim ctrl As New System.Web.UI.Control() Dim str As String = HttpContext.Current.Request.Url.GetLeftPart(UriPartial.Authority) & ctrl.ResolveUrl(HttpContext.Current.Request.ApplicationPath) ctrl.Dispose() Return str End Function #End Region End Class ''' <summary> ''' Creates the 'CLOSEBUTTONCOLORS parameter for a WZToolTip. The default values are: 'CLOSEBTNCOLORS, ['#990000', '#FFFFFF', '#DD3333', '#FFFFFF'] ''' </summary> ''' <remarks></remarks> Public Class CloseButtonColors #Region " Fields " Private _bkgndColor As String = "#990000" Private _textColor As String = "#FFFFFF" Private _hoverColor As String = "#DD3333" Private _textHoverColor As String = "#FFFFFF" #End Region #Region " Properties " Public Property BackGroundColor() As String Get Return _bkgndColor End Get Set(ByVal value As String) _bkgndColor = value.Replace("'", "") End Set End Property Public Property TextColor() As String Get Return _textColor End Get Set(ByVal value As String) _textColor = value.Replace("'", "") End Set End Property Public Property HoverColor() As String Get Return _hoverColor End Get Set(ByVal value As String) _hoverColor = value.Replace("'", "") End Set End Property Public Property TextHoverColor() As String Get Return _textHoverColor End Get Set(ByVal value As String) _textHoverColor = value.Replace("'", "") End Set End Property #End Region #Region " Methods " Public Sub New() End Sub Public Sub New(ByVal sBackGroundColor As String, ByVal sTextColor As String, ByVal sHoverColor As String, ByVal sTextHoverColor As String) BackGroundColor = sBackGroundColor TextColor = sTextColor HoverColor = sHoverColor TextHoverColor = sTextHoverColor End Sub Public Function GetValue() As String Return "CLOSEBTNCOLORS, ['" & _bkgndColor & "', '" & _textColor & "', '" & _hoverColor & "', '" & _textHoverColor & "']" End Function #End Region End Class ''' <summary> ''' Copies the content of an html element (or the element itself) to a tooltip. ''' If the ControlID is set to any non zero length string, the WZToolTip will output a TagToTip() function call instead of a Tip() function call. ''' </summary> ''' <remarks></remarks> Public Class CopyContent ' Example: 'Dim wzTip As New WZToolTip("Provider Maps") 'wzTip.CopyContent = New CopyContent(dvProviderMapsMain.ClientID) 'wzTip.CopyContent.CopyInnerHTML = False ' just append the html node not the innerHTML 'wzTip.Sticky = True 'wzTip.CloseButton = True 'wzTip.Shadow = True 'wzTip.Title = "Providers " & userName & " is mapped to." 'wzTip.Width = 300 'wzTip.OffsetY = -250 'up 'Literal1.Text = wzTip.GetAnchorTip("Provider Maps") #Region " Fields " Private _controlID As String = "" Private _copyInnerHtml As Boolean = True #End Region #Region " Properties " Public Property ControlID() As String Get Return _controlID End Get Set(ByVal value As String) _controlID = value End Set End Property Public Property CopyInnerHTML() As Boolean Get Return _copyInnerHtml End Get Set(ByVal value As Boolean) _copyInnerHtml = value End Set End Property #End Region #Region " Methods " Public Sub New() End Sub Public Sub New(ByVal sControlID As String) ControlID = sControlID End Sub #End Region End Class ''' <summary> ''' Sets the FIX property X and Y values ''' </summary> ''' <remarks></remarks> Public Class FixedCoordinate #Region " Fields " Private _x As Integer Private _y As Integer Private _jsFunction As String #End Region #Region " Properties " Public Property X() As Integer Get Return _x End Get Set(ByVal value As Integer) _x = value End Set End Property Public Property Y() As Integer Get Return _y End Get Set(ByVal value As Integer) _y = value End Set End Property Public Property JavaScriptFunction() As String Get Return _jsFunction End Get Set(ByVal value As String) _jsFunction = value End Set End Property #End Region #Region " Methods " Public Sub New() End Sub Public Sub New(ByVal iX As Integer, ByVal iY As Integer) X = iX Y = iY End Sub Public Function GetValue() As String If Not String.IsNullOrEmpty(_jsFunction) Then Return "FIX, " & _jsFunction Else Return "FIX, [" & _x.ToString() & ", " & _y.ToString() & "]" End If End Function #End Region End Class ''' <summary> ''' Sets the font weight to either normal or bold, the default is normal. ''' </summary> ''' <remarks></remarks> Public Class FontWeight #Region " Fields " Private _fntWeight As FntWeight Enum FntWeight Normal = 0 Bold = 1 End Enum #End Region #Region " Properties " Public Property Value() As FntWeight Get Return _fntWeight End Get Set(ByVal value As FntWeight) _fntWeight = value End Set End Property #End Region #Region " Methods " Public Sub New() End Sub Public Sub New(ByVal eFontWeight As FntWeight) Value = eFontWeight End Sub Public Function GetValue() As String Select Case _fntWeight Case FntWeight.Bold Return "FONTWEIGHT, " & "'bold'" Case Else Return "FONTWEIGHT, " & "'normal'" End Select End Function #End Region End Class ''' <summary> ''' Sets the TitleAlign or TextAlign property. Default is "left" ''' </summary> ''' <remarks></remarks> Public Class Align #Region " Fields " Private _alignType As eAlignType Private _alignValue As AlignValue Enum eAlignType TextAlign = 0 TitleAlign = 1 End Enum Enum AlignValue Left = 0 Right = 1 Center = 2 Justify = 3 End Enum #End Region #Region " Properties " Public Property AlignType() As eAlignType Get Return _alignType End Get Set(ByVal value As eAlignType) _alignType = value End Set End Property Public Property Value() As AlignValue Get Return _alignValue End Get Set(ByVal value As AlignValue) _alignValue = value End Set End Property #End Region #Region " Methods " Public Sub New() End Sub Public Sub New(ByVal enumAlignType As eAlignType, ByVal enumAlignValue As AlignValue) AlignType = enumAlignType Value = enumAlignValue End Sub Private Function AlignTypeToString() As String If AlignType = eAlignType.TitleAlign Then Return "TITLEALIGN" Else Return "TEXTALIGN" End If End Function Public Function GetValue() As String Select Case Value Case AlignValue.Left Return AlignTypeToString() & ", 'left'" Case AlignValue.Right Return AlignTypeToString() & ", 'right'" Case AlignValue.Center Return AlignTypeToString() & ", 'center'" Case AlignValue.Justify Return AlignTypeToString() & ", 'justify'" Case Else Return AlignTypeToString() & ", 'left'" End Select End Function #End Region End Class

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

Tagged as

Stats