HandyTips is a Skin Object. This means that in order to use it you have to manually include it in your Dnn Skins.

To setup HandyTips follow these steps:

1. Locate the ascx file of the skin you want to install HandyTips for; in our example, we'll assume the skin is /Portals/_default/Skins/MinimalExtropy/index.ascx
   
   
2. Open the skin ascx file (in our example, that is index.ascx) in a text editor
   
   
3. Before declaring our tag, we need to register our control; add the following line right after the <%@Control..> declaration the ascx file
   <%@ Register TagPrefix="avt" TagName="HandyTips" Src="~/DesktopModules/avt.HandyTips/HandyTips.ascx" %>
   
   
4. Now, we're ready to use it; just place the following tag anywhere on the page
   <avt:HandyTips runat = "server" />
   
   

This will result in HandyTips replacing all Dnn Labels with nice tooltips. There's much more to HandyTips than this: you can configure tooltips appearance, you can configure the behavior of tooltips, you can add new tooltips for any control on the homepage. Read the rest of the documentation for more information about each feature.

HandyTips tag accepts a number of parameters. The syntax is

<avt:HandyTips runat = "server" ParameterOne = "ValueOne" ParameterTwo = "ValueTwo" … />

Following is a list of all parameters available in HandyTips:

• AutoGenerateFromLabels (default value = "true")
  This tells HandyTips to automatically replace Dnn Labels with tooltips. You will set this option to false when you want to achieve custom tooltips using the items collections (described later)
• AutoGenerateHideDnnLabels = "true"
  When AutoGenerateFromLabels is set to true, this option tells HandyTips to hide Dnn Labels. If set to false, both Dnn Labels and tooltips will be visible at the same time.
• TriggerOn = "Auto"
  Tells when tooltips should be displayed. Possible values are Hover, Focus and Auto (let HandyTips decide which is best for each case).
• SpikeWidth = "10"
  Determines Width of the spikes.
• SpikeLength = "15"
  Determines Length of the spikes. Set both Width and Length to 0 to disable spikes.
• Width = "200"
  Determines tooltip width in pixels. Tooltips will scale vertically.
• Padding = "20"
  Determines padding inside tooltips (the distance between text and the margin of the tooltip)
• CornerRadius = "20"
  Determines corner radius of tooltips. Setting this to 0 will cause the tooltip to be a rectangle.
• Fill = "rgba(0, 0, 0, .8)"
  Determines the background color of the tooltip. Opacity is also supported as a percentage.
• StrokeWidth = "2"
  Determines the width of the border around the tooltip.
• StrokColor = "#CCC000"
  Determines the color of the border around the tooltip.
• TextCssStyle = "color: #FFFFFF; font-weight: bold;"
  Sets additional styles for the tooltip text.
• TextCssClass = ""
  Set a css class to use for the tooltip text
• ShowAlways = "false"
  Tooltips are always visible
• Position = ePosition.most
  Determines the direction relative to the element where the tooltip will appear; Possible values are: ePosition.most (let BeautyTips decide), ePosition.top, ePosition.bottom, ePosition.left, ePosition.right
• CenterPointX = "0.5"
  Percentage of where to place the spike on X axis
• CenterPointY = "0.5"
  Percentage of where to place the spike on Y axis
• OffsetX = "0"
  Adjust tooltips position on X axis
• OffsetY = "0"
  Adjust tooltips position on Y axis
• DrawShadow = "false"
  Only works on Firefox and Safari, IE defaults to no shadow
• EffectOnShow = "noEffect"
  Effect that controls how tooltip appears; possible values are: noEffect, fadeIn, scaleUp, scaleUpBounce
• EffectOnHide = "noEffect"
  Effect that controls how tooltip disappears; possible values are: noEffect, fadeOut, scaleDown