Wijmo Migration: ToolTip

Wijmo might be something you have been learning more about if you have been using our ASP.Net Ajax controls. ASP.Net Wijmo is our new webstack for ComponentOne. In the spotlight now is ComponentOne's ToolTip. If you have used the older control (ASP.Net Ajax ToolTip) then you will know of some of the cool features that will come packaged. The Wijmo control features:

1. Improved Performance: Fully extensible client-side and server-side object models with faster load times.
2. Latest Standards Support: CSS3 and HTML5 compliance.
3. Major Browser Support: Internet Explorer, Firefox, Chrome and Safari.
4. Themes: Built-in premium CSS3 themes and all Controls are compatible with jQuery UI Themeroller.
5. Tightly integrated with jQuery.

If you have used the ASP.Net Ajax control and are interested in moving over to the new Wijmo control, this will be a good read. Let's take a look at the procedures involved in migrating over to our latest controls and delve into some details about some basic differences between ASP.Net Wijmo controls and their older ASP.Net Ajax controls along the way.

Prerequisites

To get started in this migration you will need our ASP.net Wijmo controls. These can be downloaded here by clicking the orange "Download Free Trial" button.

Getting Started

To get things started, you should create a new ASP.net Web Application using ComponentOne's older Ajax controls. Below is the link to the quick-start guide where you will receive directions to create a web page with an accordion control and visual aid as to what the final product will look like. Once the control is set up on your web application, we can then begin to delve into the migration details for our ASP.Net Wijmo controls. During the migration process I will note changes between the Ajax and Wijmo controls.

C1ToolTip

Follow this quick-start to create the C1ToolTip using our ASP.net Ajax control.

Migration details

Once you have completed the quick-start guide you can begin migrating to the new ASP.Net Wijmo control. The first thing you will want to do is add the new ASP.Net Wijmo assembly references. Go to 'Project' from the menu-bar and select 'Add Reference'. Click the 'Browse.' button and navigate to: For .net 4.0

• For 32bit Machines: C:\Program Files\ComponentOne\Studio for ASP.NET Wijmo\bin\v4
• For 64bit Machines: C:\Program Files (x86)\ComponentOne\Studio for ASP.NET Wijmo\bin\v4

Select the C1.Web.Wijmo.Controls.4 and click "Open". For .net 3.5

• For 32bit Machines: C:\Program Files\ComponentOne\Studio for ASP.NET Wijmo\bin\v3
• For 64bit Machines: C:\Program Files (x86)\ComponentOne\Studio for ASP.NET Wijmo\bin\v3

Select the C1.Web.Wijmo.Controls.3 and click "Open". Then in the "Add Reference to." dialog box add click "Add". In your solution, open up your page where you have your ASP.net control in the Designer View.

C1ToolTip Migration

???To add the new ASP.Net Wijmo Control, simply drag the C1ToolTip from the C1 Wijmo Controls ToolBox onto the page. This will display a ToolTip box with the task menu. In our AJAX control you previously could use a tooltip designer to add child items. This would add a ToolTipTargetControl that would specify an ID and would display a value as a tooltip. In the Wijmo ToolTip the designer was not included because the user can simply create a new tooltip for each desired element. The actual ToolTip now includes the TargetSelector property where as previously, in the AJAX control, there was a separate C1ToolTipTargetControl which has a TargetSelector property. So when migrating to the Wijmo control, the user can simply take the TargetSelector from the existing Ajax C1ToolTipTargetControl and place it into the TargetSelector for your Wijmo ToolTip Control. If you have multiple elements with which you wish to use a ToolTip, the Wijmo ToolTip does this a bit differently as well. Lets say you have a list of icons that you want to display on your web page with tooltips next to them:

<div id="iconDiv">  
  <img title="Information Here" src="images/tooltip\_icon\_3.gif" /> <br />  
  <img title="Got an Idea?"  src="images/icon_tooltip%20(1).gif" />  <br />  
  <img title="ToolTip Icon"  src="images/icon_tooltip.gif" />  <br />  
  <img title="Need Help?"  src="images/tooltip_icon.gif" />  <br />  
  <img title="Post a Message" src=images/c1aspnet\_tooltip\_16.png" /> <br />  
</div>

In the older Ajax controls you would add tooltips to these one of two different ways:

1. You would create a separate C1ToolTipTargetControl and assign each ToolTipTargetControl's TargetSelector property the image id. (need to add id for the above s)
2. You would set AutoToolTipify = true (Each element on a page with a title property will get a tooltip)

In wijmo AutoToolTipify is gone and the user can simply specify the element(s) as such:

<wijmo:C1ToolTip ID="C1ToolTip1" runat="server" TargetSelector="#iconDiv [title]">  
</wijmo:C1ToolTip>

The advantage of this is that you can specify which

<cc1:C1ToolTip ID="C1ToolTip1" runat="server" AutoTooltipify="true">  
</cc1:C1ToolTip>

<wijmo:C1ToolTip ID="C1ToolTip2" runat="server" TargetSelector="#Div2 [title]">  
</wijmo:C1ToolTip>