HandyTips also give ability to create tooltips for any control on the page. The syntax is:

<avt:HandyTips runat = "server">
    <Items>
        <Item Selector = "jQuery Selector">
            This is the text that will appear inside the tooltip.
        </Item>
        <Item Selector = "another jQuery Selector">
            This is the text that will appear inside the tooltip.
        </Item>
    </Items>
</avt:HandyTips>

The Selector parameter is a jQuery selector. They allow matching any element(s) on the page. If more than element is matched, then they all get the same tooltip.

The text between <item> tags is what appears inside the tooltip. Note that it can contain html tags.

Also, note that all attributes from <avt:HandyTip> tag (except AutoGenerate attributes) can be overridden per item. For example:

<Item Selector = "#someId" Width = "400" TextCssStyle = "color: red;">
    Tooltip text.
</Item>

This will make HandyTips render the tooltip 400 pixels in width and the text will be red.

This is a simple example on how HandyTips works.

You can see that Dnn Labels are replaced with nice tooltips.

For the "email" field you will observe the default appearance, the "name" and the "subject" filed have been customized.

There is a code sample of how the two fields have been modified for certain items based on their ids:

<Item Selector = "#dnn_ctr2412_Feedback_txtName" TextCssStyle = "color: #9fFFff;" 
  Fill = "rgba(85,85, 85, .8)" StrokColor = "#111111 StrokeWidth = "2" >
  This is a customized tool tip.
</Item>

and

<Item Selector = "#dnn_ctr2412_Feedback_txtSubject" TextCssStyle = "color: #9c0a11;" 
 Fill = "rgba(255,255, 255, .8)" StrokColor = "#9c0a11" StrokeWidth = "1" ></Item> 

This is an example of how to configure the generic tool tips:

<avt:HandyTips ID="HandyTips1" runat = "server"
    AutoGenerateFromLabels = "true"
    AutoGenerateHideDnnLabels = "true"
    TriggerOn = "Auto"
    SpikeWidth = "10"
    SpikeLength = "35"
    Width = "150"
    Padding = "10"
    cornerRadius = "10"
    Fill = "rgba(75, 0, 0, .8)"
    StrokeWidth = "7"
    StrokColor = "#f1f1f1"
    TextCssStyle = "color: #00FFaa; font-size: 12px"
    TextCssClass = "SubHead">