1. Demo AstrolTooltip

Envuelva el elemento con AstrolTooltip. Aparece al pasar el ratón (tras Delay ms) o al momento al enfocarlo con el teclado, y se cierra con Esc. Si no cabe en el lado elegido, se coloca en el contrario. El elemento enfocable recibe aria-describedby, así los lectores de pantalla leen la ayuda.

@using Astrol.Component.Basic.Tooltip

<AstrolTooltip Text="Save the changes">

 <AstrolButton Text="Top" Style="AstrolStyle.White" />

</AstrolTooltip>

<AstrolTooltip Text="Opens below" Placement="AstrolTooltipPlacement.Bottom">

 <AstrolButton Text="Bottom" Style="AstrolStyle.White" />

</AstrolTooltip>

@* Own content: Content instead of Text. An icon needs tabindex="0" to be reachable by keyboard *@

<AstrolTooltip Placement="AstrolTooltipPlacement.Bottom">

 <ChildContent>

 <i class="astrol-help-circled" tabindex="0" aria-label="Help"></i>

 </ChildContent>

 <Content><b>Tip:</b> press Ctrl+K to search.</Content>

</AstrolTooltip>

Parámetros que admite

• ChildContent (RenderFragment), el elemento que lleva la ayuda.
• Text (string), texto de la ayuda, o Content (RenderFragment) para contenido propio.
• Placement (AstrolTooltipPlacement), Top (por defecto), Bottom, Left o Right.
• Delay (int), espera en milisegundos al pasar el ratón (por defecto 300).
• Class (string), clase css del contenedor.

Un icono suelto necesita tabindex="0" y aria-label para llegar a él con el teclado. En los botones de solo icono, ponga también su aria-label: el tooltip es una ayuda extra, no su nombre.