Angular 隐藏角度2材质工具提示，如ngIf

在Angular 1材质中，我可以使用一个指令，现在它是一个属性，现在很难做到。我怎样才能简单地只显示工具提示，比如当页面宽度很小时，而当页面宽度很大时，如何隐藏

我找不到。它不可能像这样使用：

<md-tooltip ngIf="false">sometimes hidden</md-tooltip>

有时是隐藏的

如果要有条件地隐藏元素，可以使用*ngIf或hidden。范例

<div *ngIf="someVariable">content</div>   // if someVariable if true, will display

<div [hidden]="someVariable">content</div>   // if someVariable is true, will hide

content//if someVariable如果为true，将显示
content//如果someVariable为true，则将隐藏

如果我正确理解您的请求，您希望仅在满足特定条件时显示工具提示，请尝试以下操作：

<div [matTooltip]="isWide ? 'Visible' : null"></div>

---

你可以这样做

Primary

---

如果希望在工具提示为false时显示工具提示，只需将null替换为文本。

我制定了以下指令，仅当文本大于包含的元素时才显示工具提示

我扩展了MatTooltip类来创建自己的自定义指令

此指令侦听它所附加到的元素上的鼠标输入事件。然后，仅当文本大小超过元素大小时，才会启用工具提示

import{Directive，ElementRef，HostListener，Inject，Input，NgZone，可选，ViewContainerRef}来自“@angular/core”；
进口{
材质工具提示默认选项，
材料工具提示滚动策略，
马图尔蒂普，
MatTooltipDefaultOptions
}从“@角度/材料”开始；
从'@angular/cdk/a11y'导入{ariasdesciber，FocusMonitor}；
从'@angular/cdk/bidi'导入{Directionality}；
从'@angular/cdk/Overlay'导入{Overlay，ScrollDispatcher}；
从'@angular/cdk/Platform'导入{Platform}；
@指示({
选择器：“[appToolTip]”
})
导出类ToolTip指令扩展了MatTooltip{
@输入（）
获取appToolTip（）{
返回此消息；
}
设置appToolTip（txt:string）{
this.message=txt；
}
建造商（私人el:ElementRef，
_叠加：叠加，
_scrollDispatcher:scrollDispatcher，
_viewContainerRef:viewContainerRef，
_ngZone:ngZone，
_站台:站台,，
_阿里亚斯描述者：阿里亚斯描述者，
_focusMonitor:focusMonitor，
@注入（MAT_工具提示_滚动_策略）_滚动策略：任意，
@可选（）\u目录：方向性，
@可选（）
_默认选项：MatTooltipDefaultOptions
) {
超级(
_叠加，
埃尔，
_调度员，
_viewContainerRef，
_ngZone，
_平台，
_阿里亚伯，
_focusMonitor，
_战略,，
_局长，
_默认选项
);
}
@HostListener（'mouseenter'）
check（）：void{
this.disabled=（this.el.nativeElement.offsetWidth}

matTooltipDisabled

用于禁用角度视图中的工具提示。使用此选项，我们可以有条件地显示工具提示

 <button mat-raised-button matTooltip="Disable tooltip" matTooltipDisabled="true">
    Disable tooltip
 </button>

如果要更改工具提示的颜色和其他css属性

<button mat-raised-button matTooltip="Adding a custom class to the tooltip" matTooltipClass="mat-tooltip">
    Custom tooltip
</button>

---

很抱歉帮了你。我只需要md工具提示，这是一个属性。保留文本，但隐藏工具提示，奇怪。我不明白你想做什么。是否希望内容显示在工具提示之外？在这种情况下，只需将其放入一个单独的div中，并使用相反的ngIf conditionActual来表示Angular 5，只需将mdTooltip替换为matTooltip

<button mat-raised-button matTooltip="Adding a custom class to the tooltip" matTooltipClass="mat-tooltip">
    Custom tooltip
</button>

 ::ng-deep   .mat-tooltip{
    color: #3E474B !important;
    background-color:#FCFCFC !important;
    border-color: rgb(197, 197, 197);
    font-size: 14px !important;
  }