Here is how I finallu got ClueTip to work. The trick for me was to not try to link them from the ascx at all but load them through code as others suggested/
Step 1. In the code behind paste the following code I found on the internet and edit the paths so they point to your plug ins. I put them in shared because I figured that is where they will ultimately go anyway but I'm pretty sure it was wrong and should be with my module or something.
Protected Sub Page_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreRender
If HttpContext.Current.Items("jquery_registered") Is Nothing Then
' load jQuery
RegisterJavascript("Resources/Shared/Scripts/jquery.js")
' let other modules know about jQuery
HttpContext.Current.Items.Add("jquery_registered", "true")
End If
' load all the plugins
RegisterJavascript("Resources/Shared/Scripts/jquery.hoverIntent.js")
RegisterJavascript("Resources/Shared/Scripts/jquery.cluetip.js")
RegisterJavascript("Resources/Shared/Scripts/jquery-ui-1.7.2.custom.min.js")
End Sub
Protected Sub RegisterJavascript(ByVal fullPath As String)
Dim script = New HtmlGenericControl("script")
script.Attributes.Add("type", "text/javascript")
script.Attributes.Add("src", fullPath)
Page.Header.Controls.Add(script)
Dim s As String = script.InnerHtml
End Sub
Step 2. Dress up your label. I'm making a custom label control that I want to just handle this for me so the following takes the localized text variables and creates the cluetip for me.
Dim cluetip As String = localText & "|" & helpText
HyperLink1.Attributes.Add("Title", cluetip)
That's all ClueTip Needs to see in the markup to make magic, but now you gotta get jQuery to tell it to look for it.
Step 3. Add the script to the ascx.
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery('a.siClueTip').cluetip({ //this tell jQuery to look for all <a> tags with the cssclass "siClueTip"
splitTitle: '|', // use the invoking element's title attribute to populate the clueTip...
// ...and split the contents into separate divs where there is a "|"
showTitle: true // hide the clueTip's heading
});
});
</script>
Since my HyperLink1 control has the class of siClueTip the Title attribute that we added in the code behind will render as a clue tip whenever we mouse over the label.
There are some dots that you may have to connect but if I could figure it out you can.
Thanks for all your help.