Combinations

Core Basic Controls Extension Controls Community Extensions Aspects Effects You are here

Combinations

Why Gaia Ajax?
The ASP.NET world needed a fast, lightfoot and intelligent library.
Gaia boosts your webapp development using C# or VB.NET and your existing ASP.NET knowledge. Gaia only sends what has changed back to the browser.
The result: a rich and responsive user experience.

Runs on ASP.NET

Gaia Ajax: Repeater with ToolTip

This ToolTip takes advantage of the built-in events MouseOver and MouseOut on the Gaia Panel. To set the location of the tooltip we utilize the ClientUtils control, which helps us clone the position of where the MouseOver event was triggered. To set the size of the tooltip panel we just copy the value of the width and height from the style collection of the image itself.

ASPX Markup
C# code
VB.NET
styles.css
ToolTipContent.ascx
ToolTipContent.ascx.cs

Markup (ASPX/.aspx)
  
 <asp:Repeater runat="server" ID="zRepeater">
     <ItemTemplate>
         <gaia:Panel runat="server" ID="zPnl" CssClass="item-container"
             OnMouseOver="MouseOver" OnMouseOut="MouseOut">
             <gaia:Image runat="server" ID="zImg" ImageUrl='<%# Eval("ThumbUrl") %>'
                 AlternateText='<%# Eval("Text") %>' />
             <gaia:HiddenField runat="server" ID="zImgId" Value='<%# Eval("Id") %>' />
         </gaia:Panel>
         <gaia:Panel runat="server" ID="zToolTip" Visible="false" CssClass="tooltip">
             <uc1:ToolTipContent ID="zToolTipContent" runat="server" />
         </gaia:Panel>
         <%= InsertLineBreak() %>
     </ItemTemplate>
 </asp:Repeater>
  