You can specify the position and animation of the C1ToolTip callout box using the following properties: CalloutSide, CalloutOffSet, CalloutAnimationDuration, and CalloutEasing. In this example, a ToolTip will appear when a user mouses over a button.
In Design View
To set the Callout properties in Design view, click View | Designer in Visual Studio and follow these steps:
1. Add an HTML Input (Button) control and C1ToolTip control to your page.
2. Right-click the C1ToolTip control and select Properties.
3. In the Visual Studio Properties window, click the drop-down arrow next to the CloseBehavior property and select none.
4. Enter the text for your tooltip next to the Text property.
5. Click the drop-down arrow next to the CalloutSide property and select Top, Right, Bottom, or Left, depending on where you want the callout box for the ToolTip to appear. Auto is the default option.
6. Set the CalloutOffset property to the number, in pixels, you would like to offset the ToolTip relative to the top or left edge of the ToolTip.
7. Click the drop-down arrow next to the CalloutEasing property and select one of the options to provide easing to the animation for the callout box when you change the callout position by code.
8. Enter a number, in milliseconds, next to the CalloutAnimationDuration property to specify how long the animation will last for the callout box moving from the last position to the current position.
9. In Design view, click the Source tab and enter markup for the button to set the callout's position so it looks like the following:
<input type="button" onclick="$find('C1ToolTip1').set_calloutOffset(50)" value="Move Callout" />
In Markup View
To set the Callout properties in Markup view, click View | Markup in Visual Studio and follow these steps:
1. Create a C1ToolTip by entering the following markup within the <form> tags of the page, after the ScriptManager tags. Here is an example:
<cc1:C1ToolTip ID="C1ToolTip1" runat="server" CloseBehavior="None" CssClass="leftsideTooltip" CalloutSide="Left" ShowCallOut="true" Width="60px" Height="320" CalloutOffset="20" Text="asp" VisualStyle="Vista">
</cc1:C1ToolTip>
2. Add a Button control to your page by adding the following markup within the <body> tags after the <form> tags:
<p>
<input id="Button1" type="button" onclick="$find('C1ToolTip1').set_calloutOffset(50)" value="Move Callout" /></p>
3. Add the following css style to the <head> tag of the page:
<style type = "text/css">
.leftsideTooltip
{
position:absolute;
left:100px;
top:100px;
}
</style>
|
