Tooltips are clipped with owner control clipping

[picrap]

Starting at 2.0.0-beta.600, tooltips behavior has changed and they now are clipped with parent’s clip mask. This occurs on WPF platform, here are a few samples: (pardon my french 😉)

[beto-rodriguez]

Tooltips changed a lot in the last couple of versions, now we completely draw them.

In previous versions, we used the provided tooltips in every supported framework, but this was harder to maintain, especially in cross platform frameworks.

Now the library draws the tooltips, the problem now is that we cannot draw outside the control 😢

[picrap]

OK this makes sense. Is there a way to handle tooltip ourselves, then ? Such as a handler that we could listen to and intercept tooltip creation ?

[DavidWiseman]

I think this might explain this issue I have on WinForms where the tooltip doesn't display correctly.

I have a few charts stacked on top of each other so the height is limited for each chart. The tooltips are particularly important for the stacked bar charts and they don't display fully. I'm currently looking into upgrading from the old version and I think this will keep me on the old version for now. The new version does feel faster and seems to be progressing well - Thanks for the work you have put into this! ♥️

[garyhertel]

I'm investigating adding support for this library using AvaloniaUI and running into a similar issue with the tooltips being cutoff for small charts. To be fair, the existing OxyPlot library I'm using has a similar problem (although maybe not quite as bad since the tooltips there only show the closest series and not all of them).

My initial investigations into overriding this using a custom IChartTooltip in the base AvaloniaUI haven't been very successful either, although I might just need to try a different method than Avalonia Flyouts. (those don't seem to work well when following the mouse cursor)

[beto-rodriguez]

I made huge improvements related to this, in the next version tooltips should always be inside the chart. also when the text is too long, it should create multiple lines, so this issue will be improved.

But that solution is not perfect, ideally, we should use the tooltips provided in Avalonia. but that also means that we should do that for each platform, it would be a huge effort, that was the old behaviour of the library, but it was hard to maintain because all the supported platforms behave really different.

[picrap]

Again, if we can have an event handler to create tooltips by ourselsves, it’s a good start. This way, the responsability of specific platforms development is on our side, so you can focus on core development and don’t feel the pressure 😉.

[beto-rodriguez]

@picrap you can do that, here is an example that uses a custom tooltip rendered by WPF:

<lvc:CartesianChart
    Series="{Binding Series}"
    YAxes="{Binding YAxes}"
    LegendPosition="Left"
    LegendBackgroundPaint="{Binding LedgendBackgroundPaint}"
    LegendTextPaint="{Binding LegendTextPaint}"
    LegendTextSize="16">
    <lvc:CartesianChart.Tooltip>
        <local:WPFTooltip></local:WPFTooltip>
    </lvc:CartesianChart.Tooltip>
</lvc:CartesianChart>

public class WPFTooltip : ToolTip, IChartTooltip<SkiaSharpDrawingContext>
{
    public WPFTooltip()
    {
        Content = new Label
        {
            Content = "custom content here...",
        };
    }

    public void Show(IEnumerable<ChartPoint> foundPoints, Chart<SkiaSharpDrawingContext> chart)
    {
        // build the layout here using the WPF api...

        // then measure the control, so livecharts can calculate the position.
        Measure(new System.Windows.Size(double.PositiveInfinity, double.PositiveInfinity));
        var size = new LvcSize((float)DesiredSize.Width, (float)DesiredSize.Height);

        var start = ((CartesianChart)chart.View).PointToScreen(new System.Windows.Point(0, 0));
        var location = foundPoints.GetTooltipLocation(size, chart);

        IsOpen = true;
        Placement = System.Windows.Controls.Primitives.PlacementMode.Absolute;
        HorizontalOffset = location.X + start.X;
        VerticalOffset = location.Y + start.Y;
    }

    public void Hide(Chart<SkiaSharpDrawingContext> chart)
    {
        IsOpen = false;
    }
}

[picrap]

Your solution for WPF tooltip is fine for me, thank you!

[DavidWiseman]

Thanks for your work on this. The tooltip is no longer displayed at the top of the bar which previously resulted in it being truncated. It can still be truncated if there is insufficient height available in the chart though. I guess the only solution would be to span outside of the control or have a wider tooltip with multiple columns.

I also noticed this behavior where the tooltip for 11:10 is located on either side of the 11:10 bar but won't display in its correct location. The text and icons are also misaligned which I'm guessing could be down to the length of the text.

I'm using WinForms. Currently using v0 and looking to upgrade at some point. Awesome work on this charting component. ♥️

[DavidKarlas]

I wonder how hard would it be to maintain per platform support for "window" creation, so in case of Blazor, create Canvas and position it above certain point in original Canvas. But tooltip content is rendered fully by LiveCharts/Skia. If platform doesn't support this "window creation" logic, fall back to current thing.

[brunossn]

@beto-rodriguez Thanks for the suggestion, it works here. Is it possible to animate the ToolTip movement?

[beto-rodriguez]

@brunossn using the WPF tooltip?

if so, you can try this:

// change this:
//HorizontalOffset = location.X + start.X;
//VerticalOffset = location.Y + start.Y;

// to:
var d = TimeSpan.FromMilliseconds(300);
BeginAnimation(HorizontalOffsetProperty, new DoubleAnimation() { To = location.X + start.X, Duration = d });
BeginAnimation(VerticalOffsetProperty, new DoubleAnimation() { To = location.Y + start.Y, Duration = d });
``