Información general de información sobre herramientas

  • Artículo

La información sobre herramientas es una pequeña ventana emergente que aparece cuando un usuario detiene el puntero del mouse sobre un elemento, por ejemplo, un control Button. En este tema se presenta la información sobre herramientas y se explica cómo crear y personalizar el contenido de la información sobre herramientas.

¿Qué es la información sobre herramientas?

Cuando un usuario mueve el puntero del mouse sobre un elemento que tiene información sobre herramientas, aparece una ventana con información sobre herramientas (por ejemplo, texto que describe la función de un control) durante un período de tiempo especificado. Si el usuario mueve el puntero del mouse fuera del control, la ventana desaparece porque el contenido de la información sobre herramientas deja de recibir el foco.

La información sobre herramientas puede contener una o más líneas de texto, imágenes, formas u otro contenido visual. Para definir la información sobre herramientas de un control, establezca una de las siguientes propiedades en el contenido de la información sobre herramientas.

La propiedad que utilice dependerá de si el control que define la información sobre herramientas hereda de la clase FrameworkContentElement o FrameworkElement.

Creación de una información sobre herramientas

En el siguiente ejemplo se muestra cómo crear una información sobre herramientas sencilla estableciendo la propiedad ToolTip para un control Button en una cadena de texto.

<Button ToolTip="Click to submit your information" 
        Click="SubmitCode" Height="20" Width="50">Submit</Button>

También puede definir una información sobre herramientas como un objeto ToolTip. En el siguiente ejemplo se usa XAML para especificar un objeto ToolTip como la información sobre herramientas de un elemento TextBox. Tenga en cuenta que en el ejemplo se especifica ToolTip mediante el establecimiento de la propiedad FrameworkElement.ToolTip.

<TextBox HorizontalAlignment="Left">ToolTip with non-text content
  <TextBox.ToolTip>
    <ToolTip>
      <DockPanel Width="50" Height="70">
        <Image Source="data\flower.jpg"/>
        <TextBlock>Useful information goes here.</TextBlock>
      </DockPanel>
    </ToolTip>
  </TextBox.ToolTip>
</TextBox>

En el siguiente ejemplo se usa código para generar un objeto ToolTip. En el ejemplo se crea un elemento ToolTip (tt) y se asocia a Button.

button = new Button();
button.Content = "Hover over me.";
tt = new ToolTip();
tt.Content = "Created with C#";
button.ToolTip = tt;
cv2.Children.Add(button);

button = New Button()
button.Content = "Hover over me."
tt = New ToolTip()
tt.Content = "Created with Visual Basic"
button.ToolTip = tt
cv2.Children.Add(button)

Para crear contenido de información sobre herramientas sin definirlo como un objeto ToolTip, se puede incluir el contenido de la información sobre herramientas en un elemento de diseño, por ejemplo, DockPanel. En el siguiente ejemplo se muestra cómo establecer la propiedad ToolTip de un contenido TextBox que está incluido en un control DockPanel.

<TextBox>
  ToolTip with image and text
  <TextBox.ToolTip>
       <StackPanel>
        <Image Source="data\flower.jpg"/>
        <TextBlock>Useful information goes here.</TextBlock>
      </StackPanel>
  </TextBox.ToolTip>

Uso de las propiedades de las clases ToolTip y ToolTipService

Para personalizar el contenido de la información sobre herramientas, puede establecer las propiedades visuales y aplicar estilos. Si define el contenido de la información sobre herramientas como un objeto ToolTip, puede establecer las propiedades visuales del objeto ToolTip. De lo contrario, deberá establecer propiedades adjuntas equivalentes en la clase ToolTipService.

Consulte Cómo: Situar una información sobre herramientas para ver un ejemplo de cómo establecer las propiedades para especificar la posición de un contenido de información sobre herramientas utilizando ToolTip y ToolTipService.

Aplicar estilos a una información sobre herramientas

Puede aplicar un estilo a ToolTip mediante la definición de un Stylepersonalizado. En el ejemplo siguiente se define un Style denominado Simple que muestra cómo desplazar la ubicación de ToolTip y cambiar su apariencia estableciendo Background, Foreground, FontSize y FontWeight.

<Style TargetType="ToolTip">
  <Setter Property = "HorizontalOffset" Value="10"/>
  <Setter Property = "VerticalOffset" Value="10"/>
  <Setter Property = "Background" Value="LightBlue"/>
  <Setter Property = "Foreground" Value="Purple"/>
  <Setter Property = "FontSize" Value="14"/>
  <Setter Property = "FontWeight" Value="Bold"/>
</Style>

Uso de las propiedades de intervalo de tiempo de ToolTipService

La clase ToolTipService proporciona las siguientes propiedades para establecer los tiempos de presentación de la información sobre herramientas: InitialShowDelay, BetweenShowDelay y ShowDuration.

Use las propiedades InitialShowDelay y ShowDuration para especificar un retraso, normalmente breve, antes de que aparezca ToolTip y también para determinar cuánto tiempo estará ToolTip visible. Para obtener más información, consulte How to: Delay the Display of a ToolTip (Cómo: Retrasar la visualización de una información sobre herramientas).

La propiedad BetweenShowDelay determina si la información sobre herramientas de los distintos controles aparecerá sin retraso inicial al mover el puntero del mouse rápidamente de uno a otro. Para obtener más información sobre la propiedad BetweenShowDelay, consulte Cómo: Retardar la presentación de una información sobre herramientas.

En el ejemplo siguiente se muestra cómo establecer estas propiedades para una información sobre herramientas.

<Ellipse Height="25" Width="50" 
         Fill="Gray" 
         HorizontalAlignment="Left"
         ToolTipService.InitialShowDelay="1000"
         ToolTipService.ShowDuration="7000"
         ToolTipService.BetweenShowDelay="2000">
  <Ellipse.ToolTip>
    <ToolTip Placement="Right" 
             PlacementRectangle="50,0,0,0"
             HorizontalOffset="10" 
             VerticalOffset="20"
             HasDropShadow="false"
             Opened="whenToolTipOpens"
             Closed="whenToolTipCloses"
             >
      <BulletDecorator>
        <BulletDecorator.Bullet>
          <Ellipse Height="10" Width="20" Fill="Blue"/>
        </BulletDecorator.Bullet>
        <TextBlock>Uses the ToolTip Class</TextBlock>
      </BulletDecorator>
    </ToolTip>
  </Ellipse.ToolTip>
</Ellipse>

Vea también