Click Here For JQuery and Zebra ToolTips
<link type="text/css" href="JQuery/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="JQuery/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="JQuery/jquery-ui.min.js"></script>
<script src="ZebraToolTips/zebra_tooltips.min.js"></script>
<link rel="stylesheet" href="ZebraToolTips/zebra_tooltips.min.css" type="text/css">
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not Page.IsPostBack Then
BuildToolTip(txtFullName, "Yo Steve, STARNS!", ToolTipHorizontalPosition.center, ToolTipVerticalPosition.above, 200, True, True)
BuildToolTip(DropDownList1, "Not freakin' way", ToolTipHorizontalPosition.center, ToolTipVerticalPosition.above, 400, True, True)
BuildToolTip(Button1, "Im a button", ToolTipHorizontalPosition.left, ToolTipVerticalPosition.below, 300, True, True)
End If
End Sub
Enum ToolTipHorizontalPosition
right
center
left
End Enum
Enum ToolTipVerticalPosition
above
below
End Enum
Sub BuildToolTip(oControl As Control, sToolTip As String, iPosition As ToolTipHorizontalPosition, iVerticalAlignment As ToolTipVerticalPosition, MaxWidth As Integer, DestroyOnClose As Boolean, ShowProgramatically As Boolean)
'Usage..
'oControl = ControlID of tooltip element
'sToolTip = Text of the tooltip to display
'ToolTipHorizontalPosition = right, center or left
'ToolTipVerticalPosition = above o rbelow
'MaxWidth = integer
'DestroyOnClose = boolean signifies to continue to show after user closes tip
'ShowProgramatically = boolean to automatically show on page load
Dim sPosition As String = ""
Select Case iPosition
Case 0
sPosition = "right"
Case 1
sPosition = "center"
Case 2
sPosition = "left"
End Select
Dim sVerticalAlignment As String = ""
Select Case iVerticalAlignment
Case 0
sVerticalAlignment = "above"
Case 1
sVerticalAlignment = "below"
End Select
Dim cs As String = oControl.GetType.ToString
Dim sID As String = ""
If cs = "System.Web.UI.WebControls.TextBox" Then
Dim o As TextBox
o = oControl
sID = "z" & o.ID
o.Attributes.Add("Class", sID)
o.Attributes.Add("title", sToolTip)
End If
If cs = "System.Web.UI.WebControls.DropDownList" Then
Dim o As DropDownList
o = oControl
sID = "z" & o.ID
o.Attributes.Add("Class", sID)
o.Attributes.Add("title", sToolTip)
End If
If cs = "System.Web.UI.WebControls.Button" Then
Dim o As Button
o = oControl
sID = "z" & o.ID
o.Attributes.Add("Class", sID)
o.Attributes.Add("title", sToolTip)
End If
Dim s As String = "<script>"
s = s & "var tooltip = new $.Zebra_Tooltips($('." & sID & "'),"
s = s & "{ position: '" & sPosition & "', vertical_alignment: '" & sVerticalAlignment & "', max_width: " & MaxWidth & ",opacity:.95,animation_speed:250});"
If ShowProgramatically Then
s = s & "tooltip.show($('." & sID & "'), " & DestroyOnClose.ToString.ToLower & ");"
End If
s = s & "</script>"
ClientScript.RegisterStartupScript(GetType(String), sID, s)
End Sub