Angular Material Tooltip位置控制与长内容适配
angular material的tooltip组件（mattooltip）为用户提供了便捷的提示信息展示能力。然而，当tooltip内嵌的文本内容过长时，即使设置了如“底部”等定位，tooltip面板仍可能出现意外的水平偏移，尤其表现为向右延伸过远，影响用户界面布局。这通常是由于tooltip面板的默认宽度不足以容纳长文本，导致其在尝试显示全部内容时突破了预期的水平限制。
本教程将详细介绍如何通过Angular Material提供的属性来精确控制Tooltip的位置，并着重解决长文本内容导致的显示异常问题。
1. 理解 matTooltipPosition 属性
matTooltipPosition是控制Tooltip相对于触发元素显示位置的核心属性。它定义了Tooltip面板的初始对齐方式。可用的值包括：
- above：在触发元素上方显示。
- below：在触发元素下方显示。
- left / before：在触发元素左侧显示。
- right / after：在触发元素右侧显示。
- bottom：在触发元素下方居中显示（这是常见的一种底部定位）。
对于原始问题中提到的“底部定位但仍向右偏移”的情况，这意味着matTooltipPosition="bottom"或"below"可能已经设置。虽然这些属性确保了垂直方向的定位，但它们不直接限制Tooltip面板的水平宽度。
示例代码：基本定位
