迁移Xamarin至MAUI后，工具提示位置及背景色自定义方法咨询

MAUI默认的Tooltip控件没有提供直接修改显示位置和背景色的API，你可以通过以下两种方式实现自定义需求：

方案一：自定义跨平台Tooltip控件 #

这种方案完全脱离原生Tooltip限制，能自由控制Tooltip的位置、样式和触发逻辑，适合跨平台统一样式的场景。

1. 创建自定义Tooltip视图 #

using Microsoft.Maui.Controls;

namespace YourAppNamespace
{
    public class CustomTooltip : ContentView
    {
        public static readonly BindableProperty TextProperty =
            BindableProperty.Create(nameof(Text), typeof(string), typeof(CustomTooltip), string.Empty);

        public static readonly BindableProperty BackgroundColorProperty =
            BindableProperty.Create(nameof(BackgroundColor), typeof(Color), typeof(CustomTooltip), Color.FromHex("#333333"));

        public static readonly BindableProperty TextColorProperty =
            BindableProperty.Create(nameof(TextColor), typeof(Color), typeof(CustomTooltip), Color.White);

        public static readonly BindableProperty PositionProperty =
            BindableProperty.Create(nameof(Position), typeof(TooltipPosition), typeof(CustomTooltip), TooltipPosition.Bottom);

        public string Text
        {
            get => (string)GetValue(TextProperty);
            set => SetValue(TextProperty, value);
        }

        public Color BackgroundColor
        {
            get => (Color)GetValue(BackgroundColorProperty);
            set => SetValue(BackgroundColorProperty, value);
        }

        public Color TextColor
        {
            get => (Color)GetValue(TextColorProperty);
            set => SetValue(TextColorProperty, value);
        }

        public TooltipPosition Position
        {
            get => (TooltipPosition)GetValue(PositionProperty);
            set => SetValue(PositionProperty, value);
        }

        public CustomTooltip()
        {
            IsVisible = false;
            var label = new Label
            {
                Padding = new Thickness(8, 4),
                FontSize = 12,
                HorizontalTextAlignment = TextAlignment.Center,
                VerticalTextAlignment = TextAlignment.Center,
                CornerRadius = 4,
                ClipsToBounds = true
            };
            label.SetBinding(Label.TextProperty, new Binding(nameof(Text), source: this));
            label.SetBinding(Label.TextColorProperty, new Binding(nameof(TextColor), source: this));
            label.SetBinding(Label.BackgroundColorProperty, new Binding(nameof(BackgroundColor), source: this));

            Content = label;
        }
    }

    public enum TooltipPosition
    {
        Top, Bottom, Left, Right
    }
}

2. 创建附加属性绑定到目标控件 #

用附加属性实现Tooltip与目标控件的关联，处理触发逻辑：

using Microsoft.Maui.Controls;
using System.Threading.Tasks;

namespace YourAppNamespace
{
    public static class TooltipAttachedProperties
    {
        public static readonly BindableProperty TooltipProperty =
            BindableProperty.CreateAttached("Tooltip", typeof(CustomTooltip), typeof(TooltipAttachedProperties), null, propertyChanged: OnTooltipChanged);

        public static CustomTooltip GetTooltip(BindableObject view)
        {
            return (CustomTooltip)view.GetValue(TooltipProperty);
        }

        public static void SetTooltip(BindableObject view, CustomTooltip value)
        {
            view.SetValue(TooltipProperty, value);
        }

        private static void OnTooltipChanged(BindableObject bindable, object oldValue, object newValue)
        {
            if (bindable is View targetView && newValue is CustomTooltip tooltip)
            {
                // 绑定长按触发逻辑（可替换为点击等其他触发方式）
                targetView.LongPressed += async (s, e) =>
                {
                    if (!tooltip.IsVisible && targetView.Parent is Layout layout)
                    {
                        if (!layout.Children.Contains(tooltip))
                            layout.Children.Add(tooltip);

                        // 根据设置的位置计算Tooltip坐标
                        var targetBounds = targetView.Bounds;
                        tooltip.HeightRequest = tooltip.Content.Measure(double.PositiveInfinity, double.PositiveInfinity).Request.Height;
                        tooltip.WidthRequest = tooltip.Content.Measure(double.PositiveInfinity, double.PositiveInfinity).Request.Width;

                        switch (tooltip.Position)
                        {
                            case TooltipPosition.Top:
                                tooltip.Layout(new Rect(
                                    targetBounds.X + (targetBounds.Width - tooltip.WidthRequest) / 2,
                                    targetBounds.Y - tooltip.HeightRequest - 8,
                                    tooltip.WidthRequest,
                                    tooltip.HeightRequest));
                                break;
                            case TooltipPosition.Bottom:
                                tooltip.Layout(new Rect(
                                    targetBounds.X + (targetBounds.Width - tooltip.WidthRequest) / 2,
                                    targetBounds.Y + targetBounds.Height + 8,
                                    tooltip.WidthRequest,
                                    tooltip.HeightRequest));
                                break;
                            case TooltipPosition.Left:
                                tooltip.Layout(new Rect(
                                    targetBounds.X - tooltip.WidthRequest - 8,
                                    targetBounds.Y + (targetBounds.Height - tooltip.HeightRequest) / 2,
                                    tooltip.WidthRequest,
                                    tooltip.HeightRequest));
                                break;
                            case TooltipPosition.Right:
                                tooltip.Layout(new Rect(
                                    targetBounds.X + targetBounds.Width + 8,
                                    targetBounds.Y + (targetBounds.Height - tooltip.HeightRequest) / 2,
                                    tooltip.WidthRequest,
                                    tooltip.HeightRequest));
                                break;
                        }

                        tooltip.IsVisible = true;
                        await Task.Delay(3000);
                        tooltip.IsVisible = false;
                    }
                };
            }
        }
    }
}

3. 在XAML中使用 #

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:YourAppNamespace"
             x:Class="YourAppNamespace.MainPage">

    <StackLayout Padding="20" Spacing="15">
        <Button Text="长按显示自定义Tooltip">
            <local:TooltipAttachedProperties.Tooltip>
                <local:CustomTooltip Text="这是顶部显示的Tooltip" 
                                     BackgroundColor="#FF5722" 
                                     TextColor="White"
                                     Position="Top"/>
            </local:TooltipAttachedProperties.Tooltip>
        </Button>

        <Entry Placeholder="输入内容">
            <local:TooltipAttachedProperties.Tooltip>
                <local:CustomTooltip Text="请输入有效的手机号" 
                                     BackgroundColor="#2196F3" 
                                     TextColor="White"
                                     Position="Right"/>
            </local:TooltipAttachedProperties.Tooltip>
        </Entry>
    </StackLayout>
</ContentPage>

方案二：通过Handler修改原生Tooltip样式与位置 #

如果想保留MAUI原生Tooltip的触发逻辑，可通过自定义平台Handler修改原生控件的Tooltip样式和位置，适合需要贴近原生体验的场景。

Android平台实现 #

1. 创建自定义Handler（Platforms/Android/Handlers/CustomTooltipHandler.cs）：

using Android.Views;
using Android.Widget;
using Microsoft.Maui.Handlers;
using Android.Content;
using Android.Util;

namespace YourAppNamespace.Platforms.Android.Handlers
{
    public class CustomTooltipHandler : ViewHandler
    {
        protected override void ConnectHandler(View platformView)
        {
            base.ConnectHandler(platformView);

            if (!string.IsNullOrEmpty(Element.Tooltip))
            {
                platformView.LongClick += (s, e) =>
                {
                    var tooltipText = Element.Tooltip;
                    var inflater = LayoutInflater.From(platformView.Context);
                    var tooltipView = inflater.Inflate(Resource.Layout.custom_tooltip, null);
                    var textView = tooltipView.FindViewById<TextView>(Resource.Id.tooltip_text);
                    textView.Text = tooltipText;

                    // 计算显示位置（顶部）
                    var location = new int[2];
                    platformView.GetLocationOnScreen(location);
                    var x = location[0] + (platformView.Width / 2) - (tooltipView.MeasuredWidth / 2);
                    var y = location[1] - tooltipView.MeasuredHeight - 10;

                    var tooltipManager = (TooltipManager)platformView.Context.GetSystemService(Context.TooltipService);
                    tooltipManager.ShowTooltip(platformView, tooltipView, x, y);
                    e.Handled = true;
                };
            }
        }
    }
}

2. 创建Android布局文件（Resources/layout/custom_tooltip.xml）：

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tooltip_text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="8dp"
    android:textSize="12sp"
    android:background="@drawable/tooltip_bg"
    android:textColor="@android:color/white"/>

3. 创建背景样式（Resources/drawable/tooltip_bg.xml）：

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FF5722"/>
    <corners android:radius="4dp"/>
</shape>

iOS平台实现 #

创建自定义Handler（Platforms/iOS/Handlers/CustomTooltipHandler.cs）：

using Microsoft.Maui.Handlers;
using UIKit;
using CoreGraphics;

namespace YourAppNamespace.Platforms.iOS.Handlers
{
    public class CustomTooltipHandler : ViewHandler
    {
        protected override void ConnectHandler(UIView platformView)
        {
            base.ConnectHandler(platformView);

            if (!string.IsNullOrEmpty(Element.Tooltip))
            {
                var longPress = new UILongPressGestureRecognizer((gesture) =>
                {
                    if (gesture.State == UIGestureRecognizerState.Began)
                    {
                        var tooltipLabel = new UILabel
                        {
                            Text = Element.Tooltip,
                            BackgroundColor = UIColor.FromHexString("#FF5722"),
                            TextColor = UIColor.White,
                            Font = UIFont.SystemFontOfSize(12),
                            Padding = new UIEdgeInsets(4, 8, 4, 8),
                            Layer = { CornerRadius = 4, MasksToBounds = true }
                        };
                        tooltipLabel.SizeToFit();

                        // 计算显示位置（顶部）
                        var targetFrame = platformView.Superview.ConvertRectToView(platformView.Frame, null);
                        tooltipLabel.Frame = new CGRect(
                            targetFrame.X + (targetFrame.Width - tooltipLabel.Frame.Width)/2,
                            targetFrame.Y - tooltipLabel.Frame.Height - 10,
                            tooltipLabel.Frame.Width,
                            tooltipLabel.Frame.Height);

                        platformView.Superview.AddSubview(tooltipLabel);

                        // 3秒后自动隐藏
                        NSTimer.CreateScheduledTimer(3, (timer) =>
                        {
                            tooltipLabel.RemoveFromSuperview();
                            timer.Invalidate();
                        });
                    }
                });
                platformView.AddGestureRecognizer(longPress);
            }
        }
    }
}

注册Handler #

在MauiProgram.cs中注册自定义Handler：

using Microsoft.Maui.LifecycleEvents;
using YourAppNamespace.Platforms.Android.Handlers;
using YourAppNamespace.Platforms.iOS.Handlers;

namespace YourAppNamespace
{
    public static class MauiProgram
    {
        public static MauiApp CreateMauiApp()
        {
            var builder = MauiApp.CreateBuilder();
            builder
                .UseMauiApp<App>()
                .ConfigureFonts(fonts =>
                {
                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                });

            builder.ConfigureMauiHandlers(handlers =>
            {
#if ANDROID
                handlers.AddHandler(typeof(Microsoft.Maui.Controls.View), typeof(CustomTooltipHandler));
#endif
#if IOS
                handlers.AddHandler(typeof(Microsoft.Maui.Controls.View), typeof(CustomTooltipHandler));
#endif
            });

            return builder.Build();
        }
    }
}

内容的提问来源于stack exchange，提问作者newxamarin