Compartir a través de

Información general sobre herramientas

Una información sobre herramientas es una ventana emergente pequeña que aparece cuando un usuario pausa el puntero del ratón sobre un elemento, como Button. En este tema se introduce el uso de los tooltips y se analiza cómo crear y personalizar su contenido.

¿Qué es un tooltip?

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

El contenido de una información sobre herramientas puede contener una o varias líneas de texto, imágenes, formas u otro contenido visual. Para definir un tooltip para un control, establezca una de las siguientes propiedades para el contenido del tooltip.

Depende de qué propiedad utilice según si el control que define la información sobre herramientas hereda de la clase FrameworkContentElement o FrameworkElement.

Creación de una sugerencia emergente

En el siguiente ejemplo se muestra cómo crear un sencillo tooltip estableciendo la ToolTip propiedad de un Button control en una cadena de texto.

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

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

<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 ejemplo siguiente se usa código para generar un ToolTip objeto . En el ejemplo, se crea un objeto ToolTip (tt) y se asocia con un 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)

También puede crear contenido de tooltip que no esté definido como un ToolTip objeto, al incluir el contenido del tooltip en un elemento de diseño, como DockPanel. En el ejemplo siguiente se muestra cómo establecer la propiedad ToolTip de un TextBox a contenido 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

Puede personalizar el contenido de las tooltips estableciendo atributos visuales y aplicando estilos. Si define el contenido del tooltip como un objeto ToolTip, puede establecer las propiedades visuales del objeto ToolTip. De lo contrario, debe establecer propiedades adjuntas equivalentes en la ToolTipService clase .

Para obtener un ejemplo de cómo establecer propiedades con el fin de especificar la posición del contenido de la información sobre herramientas utilizando las propiedades ToolTip y ToolTipService, vea Position a ToolTip.

Dar formato a un ToolTip

Puede aplicar estilo a un ToolTip mediante la definición de un Style personalizado. 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 los valores de 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 ToolTipService clase proporciona las siguientes propiedades para establecer los tiempos de presentación de la información sobre herramientas: InitialShowDelay, BetweenShowDelayy ShowDuration.

Utilice las propiedades InitialShowDelay y ShowDuration para especificar un retraso, normalmente breve, antes de que ToolTip aparezca, y también para especificar cuánto tiempo ToolTip permanece visible. Para obtener más información, vea Cómo aplazar la presentación de una Información sobre herramientas.

La propiedad BetweenShowDelay determina si aparecen sugerencias para diferentes elementos de control sin un retraso inicial al mover rápidamente el cursor del ratón entre ellos. Para obtener más información sobre la BetweenShowDelay propiedad , vea Usar la propiedad BetweenShowDelay.

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>

Consulte también

  • Last updated on