How to use md-tooltip on md-progress-linear?

Question

I am using angular material in my angular application. I want to put md-tooltip on md-progress-bar, but it does not work. md-tooltip works fine on other elements like md-icon, but not on md-progress-linear. Any help. This is how I use it.

<md-progress-linear md-mode = "determinate" value = "value"> <md-tooltip> Hello </md-tooltip> </md-progress-linear> 

Answer 1

I had to wrap the progress bar and the tooltip in another element, but not insert the tooltip inside the progress bar:

  <div class="progress-container"> <md-progress-linear md-mode="determinate" value="50"></md-progress-linear> <md-tooltip>Hello</md-tooltip> </div> 

I created a container to make it taller, because I need it to be clickable but not have a tiny hitbox.

Demo: http://codepen.io/langdonx/pen/GowBeq

Answer 2

I know this is pretty old, but I just found a solution, and maybe it could be used by others.

Putting a tooltip directly below the progress panel does not work, but you can wrap it all in a div or span:

  <div> <md-progress-linear md-mode = "determinate" value = "value"> <md-tooltip> Hello </md-tooltip> </md-progress-linear> </div> 

This way it works fine. They have not found anything yet, and in official discussions this does not seem like a solution.