Page 1 of 1

Floating tooltips

Posted: 26 Feb 2019, 12:27
by Aniak
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

Re: Floating tooltips

Posted: 28 Feb 2019, 12:06
by sfernandez
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.

Re: Floating tooltips

Posted: 01 Mar 2019, 15:17
by Aniak
It helped. Thank you very much!

Re: Floating tooltips

Posted: 01 Mar 2019, 15:19
by jsantos
Thanks for your feedback! Marking as solved

Re: Floating tooltips

Posted: 04 Mar 2019, 11:09
by Aniak
One more question... Is it a smart way to resctrict the tooltip display to the size of the view?

Re: Floating tooltips

Posted: 05 Mar 2019, 10:10
by Aniak
Problem solved. Sorry for bothering.

Re: Floating tooltips

Posted: 07 Mar 2019, 09:27
by Aniak
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

Re: Floating tooltips

Posted: 08 Mar 2019, 11:03
by sfernandez
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?

Re: Floating tooltips

Posted: 11 Mar 2019, 11:02
by Aniak
I finally manage to solve my problem. Tnak you for your help.

Re: Floating tooltips

Posted: 11 Mar 2019, 12:37
by jsantos
You welcome. Thanks for your feedback!