Search code examples
angularjsangularjs-material

How to put tool tip on the right when using <md-sidenav> using material?


I am using side navigation in my angular application, i am using buttons inside the side navigation with a tool tip on it. But it displays in bottom of the icon, i need it on the right side. I dont see any css attached to it.

Here is the code and plnkr:

<md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$media('gt-sm')">
          <md-list class="muppet-list">
            <md-item ng-repeat="it in muppets">
              <md-item-content>
                <md-button ng-click="selectMuppet(it)" ng-class="{'selected' : it === selected }">
                  <img ng-src="{{it.iconurl}}" class="face" alt="">
                  {{it.name}}
                 </md-button>
                 <md-tooltip> 
            Create Chart
           </md-tooltip> 
         </md-item-content>
       </md-item>
    </md-list>
</md-sidenav>

SIDE NAVIGATION


Solution

  • I have done it using the md-direction attribute

     <md-tooltip md-direction="right">Save</md-tooltip>