Aniak
Topic Author
Posts: 9
Joined: 27 Nov 2018, 14:41

Floating tooltips

26 Feb 2019, 12:27

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
popup->SetPlacementTarget(btn);
 
and
popup->SetHorizontalOffset(btnWidth);
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
 
User avatar
sfernandez
Site Admin
Posts: 1451
Joined: 22 Dec 2011, 19:20

Re: Floating tooltips

28 Feb 2019, 12:06

Hi,

You can move the ToolTip around with the mouse by using a RenderTransform on the tooltip content:
<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>
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);
    };
}
Hope this helps.
 
Aniak
Topic Author
Posts: 9
Joined: 27 Nov 2018, 14:41

Re: Floating tooltips

01 Mar 2019, 15:17

It helped. Thank you very much!
 
User avatar
jsantos
Site Admin
Posts: 2350
Joined: 20 Jan 2012, 17:18
Contact:

Re: Floating tooltips

01 Mar 2019, 15:19

Thanks for your feedback! Marking as solved
 
Aniak
Topic Author
Posts: 9
Joined: 27 Nov 2018, 14:41

Re: Floating tooltips

04 Mar 2019, 11:09

One more question... Is it a smart way to resctrict the tooltip display to the size of the view?
 
Aniak
Topic Author
Posts: 9
Joined: 27 Nov 2018, 14:41

Re: Floating tooltips

05 Mar 2019, 10:10

Problem solved. Sorry for bothering.
 
Aniak
Topic Author
Posts: 9
Joined: 27 Nov 2018, 14:41

Re: Floating tooltips

07 Mar 2019, 09:27

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
offset = btn->GetActualWidth() / 2.0f;
t->SetX(e.position.x + offset);
places the tooltip in a different places when I change the resolution of the screen.

Thanks for response,
Aniak
 
User avatar
sfernandez
Site Admin
Posts: 1451
Joined: 22 Dec 2011, 19:20

Re: Floating tooltips

08 Mar 2019, 11:03

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
Using a TranslateTransform to manually place the ToolTip would require code to detect those screen edge cases, and adjust the position, something like:
if (positionX + tooltipWidth > screenWidth) positionX -= positionX + tooltipWidth - screenWidth;
if (positionY + tooltipHeight > screenHeight) positionY -= positionY + tooltipHeight - screenHeight;
I wanted tolltip to be shown on the edge of the button which it corresponds
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:
<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>
but setting ... places the tooltip in a different places when I change the resolution of the screen.
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?
 
Aniak
Topic Author
Posts: 9
Joined: 27 Nov 2018, 14:41

Re: Floating tooltips

11 Mar 2019, 11:02

I finally manage to solve my problem. Tnak you for your help.
 
User avatar
jsantos
Site Admin
Posts: 2350
Joined: 20 Jan 2012, 17:18
Contact:

Re: Floating tooltips

11 Mar 2019, 12:37

You welcome. Thanks for your feedback!

Who is online

Users browsing this forum: Bing [Bot] and 5 guests