只有在元素被截断时，才会显示角度材质MatToolTip_只有当高度缩短，文本被截断时，才会在网站上显示滚动条_在iOS上，我的绝对元素只有在转换为视图时才会显示到页面高度 - 腾讯云开发者社区

只有在元素被截断时，才会显示角度材质MatToolTip

基础概念

MatToolTip 是 Angular Material 库中的一个工具提示组件，用于在用户将鼠标悬停在某个元素上时显示额外的信息。通常情况下，工具提示会在元素旁边显示，但如果元素被截断（例如，文本溢出容器边界），工具提示可以提供更完整的上下文信息。

类型

MatToolTip 主要有以下几种类型：

基本工具提示：简单的文本信息。
HTML 工具提示：可以包含 HTML 内容，提供更丰富的展示效果。
延迟显示工具提示：用户将鼠标悬停在元素上一段时间后才显示工具提示。

应用场景

表单元素：在表单中，可以使用工具提示来解释某些字段的含义或要求。
按钮和链接：在按钮或链接上添加工具提示，可以提供更多关于该操作的信息。
数据可视化：在图表或其他数据可视化元素上添加工具提示，可以帮助用户更好地理解数据。

问题及解决方法

问题：只有在元素被截断时，才会显示角度材质 `MatToolTip`

原因：这通常是因为工具提示的触发条件设置不当，或者元素的样式导致文本溢出。

解决方法：

检查触发条件：确保工具提示的触发条件设置正确。默认情况下，MatToolTip 在鼠标悬停时显示。
检查触发条件：确保工具提示的触发条件设置正确。默认情况下，MatToolTip 在鼠标悬停时显示。
检查元素样式：确保元素没有设置 overflow: hidden 或其他导致文本溢出的样式。
检查元素样式：确保元素没有设置 overflow: hidden 或其他导致文本溢出的样式。
使用 matTooltipShowDelay：如果希望工具提示在鼠标悬停一段时间后才显示，可以使用 matTooltipShowDelay 属性。
使用 matTooltipShowDelay：如果希望工具提示在鼠标悬停一段时间后才显示，可以使用 matTooltipShowDelay 属性。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MatToolTip Example</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@angular/material@12.2.13/prebuilt-themes/indigo-pink.css" rel="stylesheet">
    <style>
        .tooltip-element {
            white-space: nowrap;
            overflow: visible;
        }
    </style>
</head>
<body>
    <div class="tooltip-element">
        <button mat-button matTooltip="这是一个工具提示">悬停我</button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/@angular/core@12.2.13/bundles/core.umd.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@angular/common@12.2.13/bundles/common.umd.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@angular/material@12.2.13/bundles/material.umd.js"></script>
    <script>
        const { Component } = angular;
        @Component({
            selector: 'app-root',
            template: `<div class="tooltip-element">
                            <button mat-button matTooltip="这是一个工具提示">悬停我</button>
                        </div>`
        })
        class AppComponent {}
    </script>
</body>
</html>