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

原创

于 2025-03-27 10:50:20 发布 · 711 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#angular

背景

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

Overlay

OverlayRef的attach()支持ComponentPortal和TemplatePortal等，为了统一管理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 cl