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-tooltip>
        <md-icon md-svg-src="img/icons/ic_insert_drive_file_24px.svg">
          <md-tooltip ng-show="!isRTL" md-direction="{{demo.tipDirection}}">
          Insert Drive
        </md-tooltip>
        </md-icon>
  </md-button>

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

Here is an Example

Answer

You can override the tooltip css.

Try this:

.md-tooltip.md-origin-left {
  margin: 0 15px 0 0;
}

Leave a Reply

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