Let us get back now for our new tool tip extender. We want
to make this Tooltip look different than the regular Tooltip; i.e. page
developer would customize the tool tip background color, change font
name/color, and it will be better if we can delay the disappearing time of the
tool tip.
Look at Figure 2 which illustrates what the extender will
look like after finishing this article.
Figure 2
Now let us start building the Tool tip extender. As I mentioned,
the ASP.NET Ajax Control Project Template will automatically create three
files: (MyExtenderToolTipBehavior.js, MyExtenderToolTipDesigner.vb,
and MyExtenderToolTipExtender.vb).
Listing 6: Tooltip Extender Class
<Designer(GetType(MyExtenderToolTipDesigner))> _
<TargetControlType(GetType(WebControl))> _
Public Class MyExtenderToolTipExtender
Inherits ExtenderControlBase
<ExtenderControlProperty()> _
<DefaultValue("")> _
Public Property ToolTipText() As String
Get
Return GetPropertyValue("ToolTipText", "")
End Get
Set(ByVal value As String)
SetPropertyValue("ToolTipText", value)
End Set
End Property
<ExtenderControlProperty()> _
<DefaultValue(200)> _
Public Property ToolTipWidth() As System.Web.UI.WebControls.Unit
Get
Return GetPropertyValue("ToolTipWidth", Unit.Pixel(200))
End Get
Set(ByVal value As System.Web.UI.WebControls.Unit)
SetPropertyValue("ToolTipWidth", value)
End Set
End Property
<ExtenderControlProperty()> _
<DefaultValue("#5E8DD0")> _
Public Property ToolTipBgColor() As String
Get
Return GetPropertyValue("ToolTipBgColor", "#5E8DD0")
End Get
Set(ByVal value As String)
SetPropertyValue("ToolTipBgColor", value)
End Set
End Property
<ExtenderControlProperty()> _
<DefaultValue("Verdana")> _
Public Property ToolTipFontName() As String
Get
Return GetPropertyValue("ToolTipFontName", "Verdana")
End Get
Set(ByVal value As String)
SetPropertyValue("ToolTipFontName", value)
End Set
End Property
<ExtenderControlProperty()> _
<DefaultValue("White")> _
Public Property ToolTipFontColor() As String
Get
Return GetPropertyValue("ToolTipFontColor", "White")
End Get
Set(ByVal value As String)
SetPropertyValue("ToolTipFontColor", value)
End Set
End Property
<ExtenderControlProperty()> _
<DefaultValue(250)> _
Public Property DisappearDelay() As Integer
Get
Return GetPropertyValue("DisappearDelay", 250)
End Get
Set(ByVal value As Integer)
SetPropertyValue("DisappearDelay", value)
End Set
End Property
End ClassListing 6 is the Tool tip extender class; you can see many
properties and attributes in there. Since it is a tool tip at the end, it
should be targeting all web controls types. Therefore, the TargetControlType(GetType(WebControl)
attribute will be used to allow our extender to target any web control in the
page. This attribute will insert all the extender properties as new collection
properties in the target control.
The DisappearDelay property will
delay the disappearing time of the tool tip in milliseconds, the default value
attribute is set to be 250 milliseconds.
Now we need to set the position of the tool tip to be an
absolute position, the z-index should be equal to 100, and that will occur in
the embedded Style Sheet file, as you can see in Listing 7.
Listing 7
.tooltipdiv{
position:absolute;
padding: 2px;
border:1px solid black;
font-size:12px;
font-weight:normal;
line-height:18px;
z-index:100;
}You should add the style sheet file to the extender web
resources assembly, as in Listing 8.
Listing 8
<Assembly: System.Web.UI.WebResource("MyExtenderToolTip.MyExtenderToolTipCss.css",
"text/css")>In addition, we need to add it to the client cascade style sheet
resources, as you see in Listing 9.
Listing 9
<ClientCssResource("MyExtenderToolTip.MyExtenderToolTipCss.css")>The client-side logic will be located in the behavior
JavaScript file, discussed in the next section.
