Forums | NoesisGUI

Posted: **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

Posted: **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.

Posted: **01 Mar 2019, 15:17**

It helped. Thank you very much!

Posted: **01 Mar 2019, 15:19**

Thanks for your feedback! Marking as solved

Posted: **04 Mar 2019, 11:09**

One more question... Is it a smart way to resctrict the tooltip display to the size of the view?

Posted: **05 Mar 2019, 10:10**

Problem solved. Sorry for bothering.

Posted: **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

Posted: **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?

Posted: **11 Mar 2019, 11:02**

I finally manage to solve my problem. Tnak you for your help.

Posted: **11 Mar 2019, 12:37**

You welcome. Thanks for your feedback!

Forums | NoesisGUI

Floating tooltips

Floating tooltips

Re: Floating tooltips

Re: Floating tooltips

Re: Floating tooltips

Re: Floating tooltips

Re: Floating tooltips

Re: Floating tooltips

Re: Floating tooltips

Re: Floating tooltips

Re: Floating tooltips