Tooltip of angularjs material shows different position with right and left direction

Im using AngularJs Material’s tooltip and i run into a weird behaviour – when i set the direction to right – then it’s shows the tooltip with different spacing then with left direction

Right : enter image description here

Left: enter image description here

As you can see – the right direction got more margin then the left one…. I wonder how can i set them to equal spacing (i prefer the right margin…)

I’ve tried to add the tooltip before and after the icon – just for the sake of testing – but it didn’t worked.

 <md-button class="md-fab">
         <md-tooltip ng-show="isRTL" md-direction="{{demo.tipDirection}}">
          Insert Drive
        <md-icon md-svg-src="img/icons/ic_insert_drive_file_24px.svg">
          <md-tooltip ng-show="!isRTL" md-direction="{{demo.tipDirection}}">
          Insert Drive

B.t.w – the same bug appear on Angular Material tooltip example

Here is an Example


You can override the tooltip css.

Try this: {
  margin: 0 15px 0 0;

Leave a Reply

Your email address will not be published. Required fields are marked *