Question

在AngularJS中，可以使用选择器.md-tooltip

在CSS中设置工具提示的样式

在Angular 4中使用自定义格式工具提示的方法是什么？

修改

我正在使用Angular 4＆amp;料2。

我如何使用它的一个例子是：

<span mdTooltip='TEST' mdTooltipPosition='right'>TEST</span>

它显示工具提示非常好，除了我不知道如何设计它的事实。

Answer 1

如果要自定义工具提示的css，则可以使用::ng-deep。在组件的样式中添加以下样式：

::ng-deep .mat-tooltip {
    /* your own custom styles here */ 
    /* e.g. */
    color: yellow;
}

另一种选择是在组件中将View Encapsulation设置为无：

@Component({ 
    templateUrl: './my.component.html', 
    styleUrls: ['./my.component.css'], 
    encapsulation: ViewEncapsulation.None
})

然后在您的组件css中，您不必使用::ng-deep。

.mat-tooltip {
    /* your own custom styles here */ 
    /* e.g. */
    color: yellow;
}

Answer 2

您可以查看以下示例angular/material2 Tooltip Demo

基本上你可以按如下方式设置工具提示（你不仅可以定义css，还可以定义位置，隐藏延迟，显示延迟以及是否禁用）：

<button #tooltip="mdTooltip"
            md-raised-button
            color="primary"
            [mdTooltip]="message"
            [mdTooltipPosition]="position"
            [mdTooltipDisabled]="disabled"
            [mdTooltipShowDelay]="showDelay"
            [mdTooltipHideDelay]="hideDelay"
            [mdTooltipClass]="{'red-tooltip': showExtraClass}">

在您的组件中

  position: TooltipPosition = 'below';
  message: string = 'Here is the tooltip';
  disabled = false;
  showDelay = 0;
  hideDelay = 1000;
  showExtraClass = true;

以css为例：

/deep/ .red-tooltip {
  background-color: rgb(255, 128, 128);
  color: black;
}

Answer 3

只需在您的输入标签中添加matTooltipClass="red-tooltip"。然后在styles.css中添加此类的定义

<input type="number" matTooltipClass='red-tooltip'/>

.red-tooltip{
       background-color:red;
}

Answer 4

颜色：黄色;不会覆盖你必须添加的类（mat-tooltip）！important;

像这样：

<强> XX.component.ts：

import { Component, OnInit } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-tooltip-demo',
  templateUrl: './XX.component.html',
  styleUrls: ['./XX.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class TooltipDemoComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
}

HTML模板：

<div matTooltip="This is the Tooltip!" matTooltipPosition="below">This text has a tooltip!</div>

CSS模板：

.mat-tooltip {
  color: yellow !important;
}

然后它会起作用！

Answer 5

我们可以使用 matTooltipClass

在 HTML 中

<button mat-icon-button matTooltip="Download" matTooltipPosition="right" matTooltipClass="tooltipStyle">
  <mat-icon>download</mat-icon>
</button>

在 CSS 中

.mat-tooltip.tooltipStyle {
    font-size: 11px;
    color: red;
}

Answer 6

Angular Material工具提示公开了输入属性'matTooltipClass'

因此在HTML中

 ` 

        <mat-icon color="primary" matTooltip="test"
                    [matTooltipClass]="{ 'tool-tip': true }"
                    >help</mat-icon>

    `

在CSS中

   .tool-tip {
      color: white;
      background-color: red;

    }

Answer 7

始终使用matTooltipClass和一个自定义类。切勿直接在材质类上使用:: ng-deep，并且永远不要设置封装：ViewEncapsulation.None。角组件被制成模块化并具有自己的样式。：ng-deep（或/ deep /或>>>或它们如今所称的名称）和viewEncapsulation都将覆盖您可能希望保留在其他组件中的样式。我被这些骗了一次，有时候没有轻松的工作，但是这些会严重损害您的版图。

自定义角度材质2工具提示样式

7 个答案: