How to dynamically remove a `md-tooltip` with Angular Material?

I have a basic md-button with a md-tooltip inside. Although, I require a way to globally remove all tooltips from my website if the user is on a mobile device.

<md-button class="md-primary md-raised">
   Hello
   <md-tooltip>This is a buttons tooltip</md-tooltip>
</md-button>

After the template is loaded and directives have run, the above gets converted into the following:

<button class="md-primary md-raised md-button md-ink-ripple" type="button" ng-transclude="" aria-label="Hello">
    <span class="ng-scope">
       Hello
    </span>
    <div class="md-ripple-container"></div>
</button>

There button element no longer contains the md-tooltip, otherwise I'd simply just remove the tooltip element.

The reason for wanting to do this is because on mobile, the md-tooltip eats the button click. Therefore having the tooltip displayed on the first click and the buttons click action on the second click. This is definitely not a desirable effect.

How can I remove all tooltips from all elements on my page so that my buttons click action is the first click/tap instead of the second?

Solution 1:

Ok, so I've successfully implemented my suggestions earlier, here's the DEMO

I created another version of md-tooltip just to override angular material's version of it. Then I created an angular.decorator to choose which directive version of md-tooltip will angular use.

app.directive('mdTooltip', function(){  //create your overriding directive
  return{
    replace: true,
    template: '<span style="display:none"></span>',
    scope: {}, //create an isolated scope
    link: function(scope, element){
       element.remove();
       scope.$destroy();
    }
  };
});

app.decorator('mdTooltipDirective',function($delegate){

  var version = 0;
  var onMobile = false;//do your checking here

  if(onMobile) //here comes the switching 
    version = 1;

  return [$delegate[version]];

});

the Directive word in mdTooltipDirective is important, to say to angular that we want to select it for the Directive not a service.

EDIT: I added a link function and removed the element that is placed by the overriding directive

I don't see any mention on their docs on how to do this.

There are two ways that I can think of to work around this.

1. display: none all <md-tooltip> if your on a mobile device.
2. override the mdTooltip directive then conditionally $compile the original md-tooltip or a blank one (if you are on a mobile)