Floating tooltips
Hi,
In my project I've made tooltips for buttons with popup control. What is the best way to make the tooltip float depending on the position of the mouse cursor over the button. I've used
and
to put the tooltip in a right place on MouseEnter(). Should I use Canvas and seting RenderTransform to make it float as the cursor is moveing over button or the is a better way.
Thanks so much,
Aniak
In my project I've made tooltips for buttons with popup control. What is the best way to make the tooltip float depending on the position of the mouse cursor over the button. I've used
Code: Select all
popup->SetPlacementTarget(btn);
Code: Select all
popup->SetHorizontalOffset(btnWidth);
Thanks so much,
Aniak
-
sfernandez
Site Admin
- Posts: 2984
- Joined:
Re: Floating tooltips
Hi,
You can move the ToolTip around with the mouse by using a RenderTransform on the tooltip content:
Hope this helps.
You can move the ToolTip around with the mouse by using a RenderTransform on the tooltip content:
Code: Select all
<Grid>
<Rectangle x:Name="rect" Width="300" Height="200" Fill="LightBlue" />
<Popup x:Name="floatingTip" AllowsTransparency="True" Placement="Absolute">
<Grid Background="Navy">
<Grid.RenderTransform>
<TranslateTransform/>
</Grid.RenderTransform>
<TextBlock Margin="10,2" Foreground="White">Look At Me</TextBlock>
</Grid>
</Popup>
</Grid>
Code: Select all
TestToolTip::TestToolTip()
{
InitializeComponent();
Popup* tooltip = FindName<Popup>("floatingTip");
Noesis::Rectangle* rect = FindName<Noesis::Rectangle>("rect");
rect->MouseMove() += [rect, tooltip](BaseComponent*, const MouseEventArgs& e)
{
if (tooltip->GetIsOpen() == false) tooltip->SetIsOpen(true);
UIElement* child = tooltip->GetChild();
TranslateTransform* t = static_cast<TranslateTransform*>(child->GetRenderTransform());
t->SetX(e.position.x + 20.0f);
t->SetY(e.position.y + 20.0f);
};
rect->MouseLeave() += [tooltip](BaseComponent*, const MouseEventArgs&)
{
tooltip->SetIsOpen(false);
};
}
Re: Floating tooltips
Thanks for your feedback! Marking as solved
Re: Floating tooltips
One more question... Is it a smart way to resctrict the tooltip display to the size of the view?
Re: Floating tooltips
Ok, I've done some research and I'm still confused...
I've got two problem when I'm using above solution:
- the tooltip follows the mouse movement but when it encounters the bottom screen edge, the bottom edge of the screen hides all or part of the tooltip
- I wanted tolltip to be shown on the edge of the button which it corresponds, but settig
places the tooltip in a different places when I change the resolution of the screen.
Thanks for response,
Aniak
I've got two problem when I'm using above solution:
- the tooltip follows the mouse movement but when it encounters the bottom screen edge, the bottom edge of the screen hides all or part of the tooltip
- I wanted tolltip to be shown on the edge of the button which it corresponds, but settig
Code: Select all
offset = btn->GetActualWidth() / 2.0f;
t->SetX(e.position.x + offset);
Thanks for response,
Aniak
-
sfernandez
Site Admin
- Posts: 2984
- Joined:
Re: Floating tooltips
Using a TranslateTransform to manually place the ToolTip would require code to detect those screen edge cases, and adjust the position, something like:the tooltip follows the mouse movement but when it encounters the bottom screen edge, the bottom edge of the screen hides all or part of the tooltip
Code: Select all
if (positionX + tooltipWidth > screenWidth) positionX -= positionX + tooltipWidth - screenWidth;
if (positionY + tooltipHeight > screenHeight) positionY -= positionY + tooltipHeight - screenHeight;
Do you mean to always show the ToolTip at the bottom of the Button? In that case you don't need to specify a RenderTransform, and can use the Placement and PlacementTarget properties:I wanted tolltip to be shown on the edge of the button which it corresponds
Code: Select all
<Grid>
<Rectangle x:Name="rect" Width="300" Height="200" Fill="LightBlue" />
<Popup x:Name="floatingTip" AllowsTransparency="True" Placement="Bottom" PlacementTarget="{Binding ElementName=rect}" IsOpen="True">
<Grid Background="Navy">
<TextBlock Margin="10,2" Foreground="White">Look At Me</TextBlock>
</Grid>
</Popup>
</Grid>
The variable e.position is not dependant on screen size, it just provides the current position of the mouse. The offset is dependant on the width of the Button, so if it is different when you change screen size I guess the button is stretching to fit the new screen size, is that correct? But what do you want to accomplish with that code?but setting ... places the tooltip in a different places when I change the resolution of the screen.
Re: Floating tooltips
I finally manage to solve my problem. Tnak you for your help.
Re: Floating tooltips
You welcome. Thanks for your feedback!
Who is online
Users browsing this forum: camimamedov, Google [Bot] and 43 guests