文章/答案/技术大牛

发布

社区首页 >问答首页 >Angular Material 2 Md-带条件显示的工具提示

问Angular Material 2 Md-带条件显示的工具提示
EN

Stack Overflow用户

提问于 2017-02-16 10:22:09

回答 1查看 22.2K关注 0票数 23

我正在尝试使用角度材料2的MdToolTip。语法看起来像这样

<span mdTooltip="Tooltip!">I have a tooltip</span>

但是，我想在我的锚标签上实现这个函数。当我将鼠标悬停在ahchor标签上时，我想要显示工具提示，而class=是“非活动”的。我怎样才能做到这一点呢？

<a [ngClass]="{'not-active': !isCurrentUserExist}" [routerLink]="['/create-timesheet']">Link1</a>


/*disabled side menu links*/
.not-active {
   pointer-events: none;
   cursor: default;
}

html

css

angular

angular-material2

回答 1

Stack Overflow用户

发布于 2018-07-19 01:43:52

材质角度工具提示具有为此创建的名为matTooltipDisabled (boolean类型)的参数。它可以绑定到与正在绑定的matTooltip相同的元素。

<span matTooltip="Tooltip!" [matTooltipDisabled]="hideTooltip == true">I have a tooltip</span>

不要忘记声明变量并设置一个值;)

let hideTooltip:boolean = false;

因此，使用您自己的代码，对您来说更好的解决方案是：

<a matTooltip="Tooltip!" [matTooltipDisabled]="!isCurrentUserExist" [ngClass]="{'not-active': !isCurrentUserExist}" [routerLink]="['/create-timesheet']">Link1</a>

/*disabled side menu links*/
.not-active {
   pointer-events: none;
   cursor: default;
}

为您提供示例：https://stackblitz.com/edit/angular-conditional-tooltip

文档：https://material.angular.io/components/tooltip/overview#disabling-the-tooltip-from-showing

票数 17

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/42263670

复制

相似问题

问Angular Material 2 Md-带条件显示的工具提示
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Angular Material 2 Md-带条件显示的工具提示EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Angular Material 2 Md-带条件显示的工具提示
EN