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

Question

I am using angular material in my angular app. I want to put a md-tooltip on md-progress-bar but it is not working. md-tooltip works fine on other elements like md-icon but not on md-progress-linear. Any help. Here is how I am using 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 tooltip in another element, but not nest the tooltip inside of 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 styled the container to make it taller than it is, because I needed it to be clickable, but not have a tiny hitbox.

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