Angular由一个bug说起之十五:自定义基于Overlay的Tooltip

news2025/3/31 18:13:57

背景

工具提示(tooltip)是一个常见的 UI 组件,用于在用户与页面元素交互时提供额外的信息。由于angular/material/tooltip的matTooltip只能显示纯文本,所以我们可以通过自定义Directive来实现一个灵活且功能丰富的tooltip

Overlay

OverlayRefattach()支持ComponentPortalTemplatePortal等,为了统一管理overlay的内容,我们需要创建一个OverlayToolTipComponent用来展示具体的tooltip

@Component({
    selector: 'overlay-tooltip-inner',
    template: `
        <div class="overlay-tooltip-inner">
            @if (text) {
                <div>{{ text }}</div>
            } @else {
                <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
            }
        </div>
    `,
    styles: [`
        .overlay-tooltip-inner {
            padding: 5px;
            background-color:rgb(207, 229, 248);
            border-radius: 4px;
            box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
        }
    `],
    standalone: false
})
export class OverlayToolTipComponent {
    @Input()
    set overlayTooltip(tooltip: string | TemplateRef<any>) {
        if (_.isString(tooltip)) {
            this.text = tooltip;
        } else {
            this.contentTemplate = tooltip;
        }
    }

    text: string;
    contentTemplate: TemplateRef<any>;

    constructor() {
        //
    }
}

OverlayToolTipDirective

接下来创建OverlayToolTipDirective,它接受的tooltip参数类型是string | TemplateRef<any>

@Directive({
    selector: '[overlayTooltip]',
    standalone: false
})
export class OverlayToolTipDirective implements OnChanges, OnDestroy {

    private _overlayRef: OverlayRef = undefined;
    private _tooltip: string | TemplateRef<any> = '';

    @Input()
    set overlayTooltip(tooltip: string | TemplateRef<any>) {
        this._tooltip = tooltip ?? '';
    }

    private flexibleConnectedPositionStrategy: FlexibleConnectedPositionStrategy;
    constructor(private _overlay: Overlay,
        private _overlayPositionBuilder: OverlayPositionBuilder,
        private _elementRef: ElementRef) {
        //
    }

    ngOnChanges(changes: SimpleChanges): void {
        if (_.size(this._tooltip) > 0) {
            this.updateFlexibleConnectedPositionStrategy();
            this.bindingTriggers();
        }
    }

    private updateFlexibleConnectedPositionStrategy() {
        this.flexibleConnectedPositionStrategy = this._overlayPositionBuilder
            .flexibleConnectedTo(this._elementRef)
            .withPositions([this.createPosition('center', 'top', 'center', 'bottom')]);
    }

    private generateOverlayRef() {
        if (!this.flexibleConnectedPositionStrategy) {
            this.updateFlexibleConnectedPositionStrategy();
        }
        this._overlayRef = this._overlay.create({ positionStrategy: this.flexibleConnectedPositionStrategy });
    }

    private createPosition(originX: HorizontalConnectionPos, originY: VerticalConnectionPos,
        overlayX: HorizontalConnectionPos, overlayY: VerticalConnectionPos
    ): ConnectionPositionPair {
        return { originX, originY, overlayX, overlayY };
    }

    private bindingTriggers() {
        this._elementRef.nativeElement.addEventListener('mouseover', this.show());
        this._elementRef.nativeElement.addEventListener('mouseout', this.hide());
    }

    private show() {
        if (!this._overlayRef) {
            this.generateOverlayRef();
        }
        if (this._overlayRef && !this._overlayRef.hasAttached()) {
            const tooltipRef: ComponentRef<OverlayToolTipComponent> = this._overlayRef.attach(new ComponentPortal(OverlayToolTipComponent));
            tooltipRef.instance.overlayTooltip = this._tooltip;
        }
    }

    private hide() {
        if (!_.isEmpty(this._overlayRef) && this._overlayRef.hasAttached()) {
            this._overlayRef.detach();
        }
    }

    private cleanUpOverlayRef() {
        if (this._overlayRef?.dispose) {
            this._overlayRef.dispose();
            this._overlayRef = undefined;
        }
    }

    ngOnDestroy() {
        this.cleanUpOverlayRef();
        this.removeExistingListeners();
    }

    removeExistingListeners() {
        this._elementRef.nativeElement.removeEventListener('mouseover', this.show());
        this._elementRef.nativeElement.removeEventListener('mouseout', this.hide());
    }
}

效果如下:

位置自适应

由上图可以看出,当位置不够容纳tooltip时,目标元素会被遮挡。所以我们需要添加placementautoPosition允许用户指定tooltip的位置和tooltip是否可以自适应位置

通过OverlayPositionBuilderwithPositions()设置position数组。

class ConnectionPositionPairExt extends ConnectionPositionPair {
    sort: number;
}

export class OverlayToolTipDirective implements OnChanges, OnDestroy {
...
    @Input() placement: 'top' | 'bottom' | 'left' | 'right' = 'top';
    @Input() autoPosition = true;

    // updateFlexibleConnectedPositionStrategy() 更改如下:
    private updateFlexibleConnectedPositionStrategy() {
        this.flexibleConnectedPositionStrategy = this._overlayPositionBuilder
            .flexibleConnectedTo(this._elementRef)
            .withPositions(this.getAvailablePositions());
    }

    private getAvailablePositions(): ConnectionPositionPairExt[] {
        // 生成四个方向的默认位置配置
        const positions = [
            this.createPosition('center', 'top', 'center', 'bottom', 1), // top
            this.createPosition('start', 'center', 'end', 'center', 2), // left
            this.createPosition('center', 'bottom', 'center', 'top', 3), // bottom
            this.createPosition('end', 'center', 'start', 'center', 4), // right
        ];
    
        // 根据当前 placement 设置优先级
        const priorityMap: { [key in string]: number } = {
            ['bottom']: 2,
            ['left']: 1,
            ['right']: 3,
        };
        positions[priorityMap[this.placement] || 0].sort = 0;
      
        // 返回排序后的位置配置
        return this.autoPosition ? positions.sort((a, b) => a.sort - b.sort) : [positions[priorityMap[this.placement] || 0]];
    }
...
}

效果如下,string或者template

总结

这样我们就在不引入其他库的前提下完成了一个内容丰富位置灵活的tooltip组件啦。

要注意,在tooltip被触发时再创建OverlayRef以避免不必要的性能开销。当tooltip隐藏和Directive销毁时,删除事件监听并调用OverlayRef的detach()dispose()

另外,Overlay的ConnectedPosition还可以指定tooltip和目标元素之间的距离,也可以增加panelClass以便深度定制tooltip的内容。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2323570.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

GPT-SoVITS本地部署:低成本实现语音克隆远程生成音频全流程实战

文章目录 前言1.GPT-SoVITS V2下载2.本地运行GPT-SoVITS V23.简单使用演示4.安装内网穿透工具4.1 创建远程连接公网地址 5. 固定远程访问公网地址 前言 今天要给大家安利一个绝对能让你大呼过瘾的声音黑科技——GPT-SoVITS&#xff01;这款由花儿不哭大佬精心打造的语音克隆神…

Flutter视频播放优化

在Flutter中实现流畅视频播放&#xff0c;选择合适的播放器插件是关键。推荐使用以下两类插件&#xff1a; 跨平台低延迟方案 flutter_vlc_player&#xff1a;基于VLC引擎&#xff0c;支持RTSP/RTMP协议&#xff0c;通过hwAcc: HwAcc.full启用硬件加速&#xff0c;配合setOpti…

嵌入式学习第二十八天--顺序栈

栈的基本代码 栈是限定仅在表尾进行插入和删除操作的线性表。 先进后出、后进先出 栈顶:允许操作的一端 栈底:不允许操作的一端 入栈&#xff0c;出栈。 顺序栈 链式栈 302\5 1.创建 CreateSeqStack 2.销毁 DestroySeqStack 3.判断是否为空栈 IsEmptySeqStack 4.判断是否为满…

基于MCP协议的多模态模型优化在医疗3D打印精密人工关节制造中的研究

一、引言 1.1 研究背景与意义 在全球人口老龄化趋势愈发明显的当下,诸如骨关节炎、类风湿性关节炎这类关节疾病的发病率不断攀升,进而使得人工关节置换手术的需求呈现出激增态势。人工关节置换手术作为治疗终末期关节疾病的有效手段,能够显著缓解患者疼痛,提升关节功能与生…

【Unity】 HTFramework框架(六十三)SerializableDictionary可序列化字典

更新日期&#xff1a;2025年3月26日。 Github 仓库&#xff1a;https://github.com/SaiTingHu/HTFramework Gitee 仓库&#xff1a;https://gitee.com/SaiTingHu/HTFramework 索引 一、SerializableDictionary可序列化字典1.使用SerializableDictionary2.实现思路 二、Serializ…

MATLAB绘图配色包说明

本栏目将分享MATLAB数据分析图表&#xff0c;该贴讲述配色包的使用 将配色包colormap_nclCM文件夹添加到路径close all&#xff08;尽量不要删&#xff09;&#xff0c;使用map colormap(nclCM(309))时会多出来一张空白图片。配色资源来自slandarer&#xff1b;找不到合适颜色…

8路CXP相机采集系统介绍

8xCXP相机采集系统介绍 目录 1 系统概述 4 2 硬件架构 5 2.1 FPGA处理单元 5 2.2 CXP接口层 6 2.3 CXP相机说明与使用要求 7 2.4 SSI控制器板 8 3 FPGA方案 9 3.1 FPGA实现 9 3.2 Block Design说明 10 4 软件方案 14 4.1 嵌入式层 14 4.2 上位机软件&#xff08;C…

Stable Diffusion 基础模型结构超级详解!

1. Transformer 第一个只用 Attention 机制来解决序列到序列问题的模型&#xff0c;最早被 Google 用来解决翻译问题 对于中英翻译而言&#xff0c;需要解决三个具体的问题&#xff1a; 如何用数字表示中文和英文 如何让神经网络理解语义 如何让神经网络生成英文 1.1 Tok…

【Linux网络(七)】数据链路层

目录 1、认识MAC地址 2、 mac帧格式 3、局域网的通信原理 4、ARP协议 浏览器输入url1后发生的事情&#xff1a;&#xff08;面试题&#xff09; 数据链路层解决的是&#xff1a;直接相连的主机&#xff08;不仅仅包括电脑&#xff0c;还包括路由器&#xff09;之间&#x…

2025年渗透测试面试题总结-某奇安信-Ateam(题目+回答)

网络安全领域各种资源&#xff0c;学习文档&#xff0c;以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具&#xff0c;欢迎关注。 目录 奇安信-Ateam 一、SQL注入攻防技术体系 1.1 SQL注入类型矩阵&#xff08;基于利用方式&#xff09; …

Windows 10 ARM64平台MFC串口程序开发

Windows 10 IoT ARM64平台除了支持新的UWP框架&#xff0c;也兼容支持老框架MFC。使得用户在Windows 10 IoT下可以对原MFC工程进行功能升级&#xff0c;不用在新框架下重写整个工程。熟悉MFC开发的工程师也可以在Windows 10 IoT平台下继续使用MFC进行开发。 本文展示MFC串口程序…

31天Python入门——第16天:模块与库详解

你好&#xff0c;我是安然无虞。 文章目录 Python模块模块之间的调用 Python包库的概念Python标准库安装第三方库 \_\_name\_\_ \_\_main\_\_ Python模块 在 Python 中, 模块是一个包含函数、变量和类等代码定义的py文件. 所以也可以说, 普通的py文件就是一个模块. 模块可以…

设计模式(创建型)- 原型模式

目录 定义 类图 角色 优缺点 优点 缺点 应用场景 案例展示 浅克隆 深克隆 定义 原型模式旨在创建重复的对象&#xff0c;同时确保良好的性能表现。它通过复制现有对象&#xff08;原型&#xff09;来创建新对象&#xff0c;而非使用传统的构造函数创建方式。这种设计…

【Linux】应用层协议 HTTP

应用层协议 HTTP 一. HTTP 协议1. URL 地址2. urlencode 和 urldecode3. 请求与响应格式 二. HTTP 请求方法1. GET 和 POST (重点) 三. HTTP 状态码四. HTTP 常见报头五. 手写 HTTP 服务器 HTTP&#xff08;超文本传输协议&#xff09;是一种应用层协议&#xff0c;用于在万维网…

数据可视化TensorboardX和tensorBoard安装及使用

tensorBoard 和TensorboardX 安装及使用指南 tensorBoard 和 TensorBoardX 是用于可视化机器学习实验和模型训练过程的工具。TensorBoard 是 TensorFlow 官方提供的可视化工具&#xff0c;而 TensorBoardX 是其社区驱动的替代品&#xff0c;支持 PyTorch 等其他框架。以下是它…

【Hugging Face 开源库】Diffusers 库 —— 扩散模型

Diffusers 的三个主要组件1. DiffusionPipeline&#xff1a;端到端推理工具__call__ 函数callback_on_step_end 管道回调函数 2. 预训练模型架构和模块UNetVAE&#xff08;Variational AutoEncoder&#xff09;图像尺寸与 UNet 和 VAE 的关系EMA&#xff08;Exponential Moving…

AWTK-WEB 快速入门(6) - JS WebSocket 应用程序

WebSocket 可以实现双向通信&#xff0c;适合实时通信场景。本文介绍一下使用 Javacript 语言开发 AWTK-WEB 应用程序&#xff0c;并用 WebSocket 与服务器通讯。 用 AWTK Designer 新建一个应用程序 先安装 AWTK Designer&#xff1a; https://awtk.zlg.cn/web/index.html …

使用VSCODE导致CPU占用率过高的处理方法

1&#xff1a;cpptools 原因&#xff1a;原因是C/C会在全局搜索文件&#xff0c;可以快速进行跳转&#xff1b;当打开的文件过大&#xff0c;全局搜索文件会占用大量CPU&#xff1b; 处理方法&#xff1a; 1&#xff1a;每次只打开小文件夹&#xff1b; 2&#xff1a;打开大文…

【力扣hot100题】(004)盛水最多的容器

现在能这么快做出来纯粹是因为当时做的时候给我的印象实在太深了。 犹记得这题是当年开启我用CSDN记录leetcode日记历史的开端。 总之印象太深了不会都不行啊&#xff01;&#xff01;记得当年是想到用各种动态规划回溯等等等等最终发现是最简单贪心和双指针。 解法也是非常简…

用Deepseek写扫雷uniapp小游戏

扫雷作为Windows系统自带的经典小游戏&#xff0c;承载了许多人的童年回忆。本文将详细介绍如何使用Uniapp框架从零开始实现一个完整的扫雷游戏&#xff0c;包含核心算法、交互设计和状态管理。无论你是Uniapp初学者还是有一定经验的开发者&#xff0c;都能从本文中获得启发。 …