ASP.NET & JQuery, Poshytip ToolTip encapsulado :)
Hola!, no sabía como nombrar este post, pero vamos por parte, primero que nada quiero que veas el siguiente articulo sobre un plugin para JQuery:
http://vadikom.com/demos/poshytip/
Como pudiste ver, este plugin nos permite generar atractivos Tooltips configurables , puedes ver en la misma página la lista de propiedades
Ahora bien, consiente de que no todos los desarrolladores están familiarizados con JQuery es que me propuse hacer un pequeño aporte para que se les haga más fácil el trabajo.
Mi idea fue crear las clases necesarias para que desde el lado del servidor puedas agregar la funcionalidad de Poshytip a tus páginas mediante código programático.
Vamos a empezar de Atrás para Adelante, es decir, mostrando el resultado Final y luego el como se programó, por si te animas a hacer lo mismo con otro control
Tengo un webform con unos varios hyperlink (aunque podrías usar otro control) y un textbox:
Luego al ejecutar el siguiente código:
Dim tm As New ToolTipManager(Me.Page, True)
Dim tlista As New List(Of ToolTip)
tlista.Add(New ToolTip(hp1.ClientID, "probando"))
tlista.Add(New ToolTip(hp2.ClientID, "probando2",
ToolTip.CssClassOption.tipGreen))
tlista.Add(New ToolTip(hp3.ClientID, "probando3",
ToolTip.CssClassOption.tipTwitter))
tlista.Add(New ToolTip(hp4.ClientID, "probando4",
ToolTip.CssClassOption.tipViolet))
tlista.Add(New ToolTip(hp5.ClientID, "probando5",
ToolTip.CssClassOption.tipYellowsimple))
tlista.Add(New ToolTip With {.target = txNombre.ClientID, _
.content = "Ingrese Nombre", _
.showOn = ToolTip.ShowOnOption.focus, _
.alignTo = ToolTip.AlignToOption.target, _
.alignX = ToolTip.AlingXOption.right, _
.alignY = ToolTip.AlingXOption.center, _
.className = ToolTip.CssClassOption.tipGreen, _
.offsetX = 5
})
tm.writeToolTipList(Me.Page, tlista)
Como puedes ver, se crear un TooltipManager, que nos va generar todo el código necesario para visualizar los ToolTip. Luego por cada control HyperLink (hp1,hp2…) vamos agregando mediante su clientID, el texto del tooltip. He creado dos constructores para facilitar las cosas, uno que recibe el ClientID y el texto, y otro que además recibe el estilo.
Ahora para que veas el resultado (luego explico como lo hice)
Se ve bien verdad?, como vez, la idea es que sin tener que escribir código JS puedas utilizar este excelente PlugIn.
La configuración es bastante sencilla y lo hice para que minimizaras el código a escribir. Revisemos la estructura del proyecto.
Incluimos en el AppSetting las siguientes entradas:
<appSettings>
<add key="ToolTipJSPath" value="js/"/>
<add key ="ToolTipCSSPath" value="TooltipCss/"/>
</appSettings>
Que no hace nada más que indicar cual es la ruta para los JS que vamos a incluir, lo mismo para los CSS, puedes crear nuevos e incluirlos (recuerda agregarlos a la enumeración correspondiente)
Las Clases involucradas en esto son:
En donde Tooltip es la clase que representa el ToolTip y tiene las propiedades del plugin, además un método que se llama writeTooltip que devuelve un string listo para imprimir. Utilizo enumeraciones para que sea más fácil a la hora setear los posibles valores, los cuales corresponden obviamente a los originales del plugin.
La clase ToolTipManager tiene un constructor que escribe los links necesarios para que se ejecute el plugin.
Este constructor recibe dos parámetros uno que es la página y el otro si se utiliza CDN (para estar un poco a la moda). Vamos agregando links programáticamente al header, de esta manera al momento de ejecutar la página, sin tener que escribir nosotros el código , va a estar incrustado, a continuación un ejemplo de como incluir un archivo js.
Dim include2 As New HtmlGenericControl("script")
include2.Attributes.Add("type", "text/javascript")
include2.Attributes.Add("src", path & "jquery.poshytip.js")
page.Header.Controls.Add(include2)
Luego el método WriteToolTipList recibe una lista de ToolTips y llama al método writeToolTip de cada ToolTip, de esta manera se va escribiendo en la página el código JQuery que va a permitir atachar el plugin a los controles que especifiquemos:
Public Sub writeToolTipList(ByVal Page As Page, ByVal ToolTipList As List(Of ToolTip))
Dim include As New HtmlGenericControl("script")
include.Attributes.Add("type", "text/javascript")
include.InnerHtml = "$(function(){"
For Each tt As ToolTip In ToolTipList
include.InnerHtml &= tt.WriteTooTip
Next
include.InnerHtml &= "});"
Page.Header.Controls.Add(include)
End Sub
Entonces, ahora si quieres bájalo y pruébalo, esta escrito con VS2010, es llegar y ocupar 
,incluye el plugin, jquery, los estilos, las clases y el ejemplo
PD: El Dueño de control es http://vadikom.com/, a él el honor y la gloria, yo solo hice una especie de “Encapsulación” del control. Si vas a la página del autor, tiene ejemplos con llamadas asíncronas muy buenas!
Espero que te sirva,
Nos vemos!
Gonzalo