时间戳

首页 > 解决方案 > 调整窗口大小时更改工具提示的位置

javascript - 调整窗口大小时更改工具提示的位置

问题描述

我正在使用 angular 来构建投资组合，并希望使用材料 tooltips。在浏览器（宽屏）中查看网站时，我希望位置正确。如果在移动设备上查看该网站，我希望它显示在元素下方。目前，当我刷新页面时，工具提示会显示在正确的位置。但是，我在调整浏览器大小时更改位置时遇到问题。立场似乎没有改变。

这是我目前拥有的代码。

HTML：

<fa-icon [icon]="faAddressCard" class="has-tooltip" #tooltip="matTooltip" matTooltip="About me" [matTooltipPosition]="tooltipPosition" matTooltipClass="tooltip"></fa-icon>

TS：

tooltipPosition = window.innerWidth < 600 ? 'below' : 'right';

ngOnInit(): void {
    window.addEventListener('resize', this.updateTooltipPosition);
    this.updateTooltipPosition()
}

updateTooltipPosition() {
    let position = window.innerWidth < 600 ? 'below' : 'right';
    let tooltips = document.getElementsByClassName('has-tooltip')
    for (let i = 0; i < tooltips.length; i++) {
      tooltips[i].setAttribute('ng-reflect-position', position)
    }
}

欢迎任何解决此问题的提示！我是一名初级开发人员，所以对我的代码的任何其他评论也很感激！

标签： javascriptangularangular-material

解决方案

推荐阅读