HoverMenu

Descripción

El HoverMenu es un extendedor aplicable a cualquier control Web. Vamos a distinguir entre el cuerpo y el popup, de modo que cuando el ratón pase sobre el control web cuerpo, el control web popup aparezca en el lugar en que hayamos especificado. Además, cuando esto suceda, podemos aplicar una clase CSS al control web cuerpo, haciendo ver al usuario que es el causante de que aparezca el popup.

Propiedades

• TargetControlID: ID del control identificado como cuerpo.
• PopupControlID: ID del control identificado como popup.
• HoverCssClass: clase CSS que se aplicará al cuerpo cuando pasemos el ratón sobre éste.
• PopupPostion: lugar donde aparecerá el popup con respecto al cuerpo. Por defecto vale Left, y sus otros valores son Right, Bottom y Center.
• OffsetX/OffsetY: una vez definido el PopupPosition, podemos añadir o quitar pixels en horizontal o en vertical con respecto a su posición relativa.
• PopDelay: la cantidad de milisegundos que pasarán entre que nos posemos sobre el cuerpo hasta que aparezca el popup. Por defecto son 100.

Ejemplo

En nuestro ejemplo, el cuerpo se corresponde con un botón y el popup con un Panel, de modo que cuando el usuario vaya a hacer clic sobre el botón, se muestre un mensaje (Podemos asignarle cualquier propiedad al Panel):

<asp:Button ID="Button1" runat="server" Text="Haz clic" />
<asp:Panel ID="Panel1" runat="server"
Height="50px" Width="125px"
BackColor="Yellow" BorderWidth="1px" ScrollBars="Auto">
Si presionas sobre el botón, se recargará la página.
</asp:Panel>

<ajaxToolkit:HoverMenuExtender ID="HoverMenuExtender1" runat="server"
PopupControlID="Panel1"
TargetControlID="Button1"
PopupPosition="Right"
OffsetX="10">
</ajaxToolkit:HoverMenuExtender>