Angular Dart 中的工具提示

Question

我正在尝试实现类似于在 Angular Material 应用程序中实现的工具提示，但这在 Angular Dart 示例应用程序中不起作用。我正在尝试：

<button mat-raised-button
    tooltip="test"
    title="test 123"
    matTooltip="By default, I delay"
    aria-label="Button that displays a tooltip that has custom delays 
    through a default config">
  Button with delay-default tooltip
</button>

我也试过：

  <p>Use the [trailing] content selector to add a tooltip.</p>
  <material-input label="With a tooltip">
    <material-icon
        trailing
        tooltipTarget
        size="medium"
        icon="help_outline"
        #tooltipRef="tooltipTarget">
    </material-icon>
  </material-input>
  <material-tooltip-card [for]="tooltipRef">
    This is a paper tooltip!
  </material-tooltip-card>

以此为源 (https://dart-lang.github.io/angular_components/#/material_tooltip)，我也尝试过

<button materialTooltip="abc">test</button>

None 成功了。如何在悬停时显示简单的工具提示？

Answer 1

确保您注册了所需的提供商

  providers: [
    popupBindings,
    tooltip.materialTooltipBindings,
  ],

就像在

中完成的一样

https://github.com/dart-lang/angular_components_example/blob/fecf215d65a19be97fd248036640e297161c49e3/example/material_tooltip_example/lib/material_tooltip_example.dart#L37-L40

在 AppComponent 中注册一次应该对整个应用程序都有效。

Angular Dart 中的工具提示

Tooltips in Angular Dart

dart

angular-dart