Tooltips in Angular Dart

Question

I am trying to implement tooltips similar to how this would be achieved in an Angular Material app, but this isnt working in an Angular Dart sample application. I am trying:

<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>

I've also tried:

  <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>

Going from this as a source ( https://dart-lang.github.io/angular_components/#/material_tooltip ) , I have also tried

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

None have worked. How do I go about showing simple tooltips on hover?

Did you add these providers github.com/dart-lang/angular_components_example/blob/… ? — Günter Zöchbauer
No I had included the directives but not the providers. That fixed it, if you answer i can mark as solution. — james

Günter Zöchbauer Günter Zöchbauer · Accepted Answer · 2018-11-28T04:17:52

Ensure you registered the required providers

  providers: [
    popupBindings,
    tooltip.materialTooltipBindings,
  ],

like it's done in

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

Registering them once in the AppComponent should do for the whole app.

Tooltips in Angular Dart

1 Answers