No Provider for MdTooltip

[datrinh]

Bug, feature request, or proposal:

When I inject the MdTooltip service into a component I get a No Provider for MdTooltip error.
All other material components I use are working fine. Tooltips work fine too except for the injecting.

What is the expected behavior?

No runtime error.

What is the current behavior?

No Provider for MdTooltip

What are the steps to reproduce?

Create a new ng-cli app and inject MdTooltip.
Example plnkr: http://plnkr.co/edit/UIzqoHLPqWMk2W0H5pRj?p=preview

What is the use-case or motivation for changing an existing behavior?

Using MdTooltip service functions such as show()

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

@angular/cli: 1.3.1
node: 7.6.0
os: darwin x64
@angular/animations: 4.3.5
@angular/cdk: 2.0.0-beta.8
@angular/common: 4.3.5
@angular/compiler: 4.3.5
@angular/core: 4.3.5
@angular/flex-layout: 2.0.0-rc.1
@angular/forms: 4.3.5
@angular/http: 4.3.5
@angular/material: 2.0.0-beta.8
@angular/platform-browser: 4.3.5
@angular/platform-browser-dynamic: 4.3.5
@angular/router: 4.3.5
@angular/cli: 1.3.1
@angular/compiler-cli: 4.3.5
@angular/language-service: 4.3.5

[crisbeto]

That's because MdTooltip is a component, not a service. You can only inject it into a component or child of a component that uses mdTooltip.

[datrinh]

How would I go about programmatically showing or hiding a tooltip then? Is there some example online showing it?
For example if I want to show a tooltip on click/tap instead of mouseover?

[rafaelss95]

To get a instance of MdTooltip in your component you could use ViewChild and then call the methods show and hide to handle its visibility.

See this plunker.

Oops, I just noticed that the .show() method isn't working (in plunker). Any thoughts @crisbeto? Am I missing something?

[joejordanbrown]

@datrinh

It already activates using tap via touch device. You can't use the click event because of the interaction method which I'll explain below.

You can view the demo code for how to programmatically trigger the tooltip here or using the ViewChild example in @rafaelss95 plunker.

---

@rafaelss95 that's because you're using the event click for calling the method show. If you see the demo example it uses the mouseenter event on the buttons.

The problem is with the interactions method here.

  /**
   * Interactions on the HTML body should close the tooltip immediately as defined in the
   * material design spec.
   * https://material.google.com/components/tooltips.html#tooltips-interaction
   */
  _handleBodyInteraction(): void {
    if (this._closeOnInteraction) {
      this.hide(0);
    }
  }

I'm not sure if there needs to be a way to disable this, because of what the Material spec states?

A tooltip is triggered by tapping and holding an item

But I do believe it still should be up to the developer to deviate from the material specs when it's really required.

[rafaelss95]

@joejordanbrown nice to know the reason why it isn't working :)

In fact, what @datrinh wants is something like a popover (issue here).

Oops, I just saw that you've published a popover's package. Nice :)

[joejordanbrown]

@rafaelss95 Yes, maybe a popover is more appropriate. haha yes, that's correct, it's still very much a WIP, waiting for the full @angular/cdk to be published then it will have a full rewrite. I'm still unsure if the API for it is over complicated though. It tries to cater for all use cases, which sometimes just makes it confusing to use. it works pretty well as a form popover too on input focus and blur. I need to push the latest full demo, which really shows off its full potential.

[datrinh]

OK, following situation:
I'm listening to the press event from hammerjs and I call tooltip.show() via ViewChild in the onPress() event handler. The problem is, that the tooltip doesnt show unless I explicitly move away with the mouse and reenter the button with the press event again... Apparently, it's the situation @joejordanbrown described above. Any workaround for this?

I don't really need a popover with carets or anything. Pretty much the style of the tooltip with showing and hiding is what I need. Am i better off building my own component for it?

[jelbourn]

Please keep GitHub issues for bug reports / feature requests. Better avenues for troubleshooting / questions are stack overflow, gitter, mailing list, etc.

[joejordanbrown]

@jelbourn @crisbeto this is a valid issue that should be answered by a team member if it's the intended purpose to strictly prohibit activation of the popover using other events that will automatically initiate the _handleBodyInteraction method and hide the tooltip.

If you read my comments above I go into detail about why it doesn't allow all types of events to trigger show and close. if it's currently working how it should following the Material Specs exactly, then it would be nice to have that clarified and then it can be added to the documents to stop confusion.

[crisbeto]

@joejordanbrown not being able to open the tooltip on click is definitely a bug. It'll be resolved by #6590.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}