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

admin管理员组

文章数量:1305663

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?

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?

• javascript
• angularjs
• angular-material

Share Improve this question Follow edited Feb 22, 2016 at 3:54 Fizzix asked Feb 11, 2016 at 1:46 FizzixFizzix 24.4k4040 gold badges116116 silver badges180180 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6 +50

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 es 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 $pile the original md-tooltip or a blank one (if you are on a mobile)

HTML

<md-tooltip md-direction="bottom"  class="tooltip">Tooltip Bottom</md-tooltip>

CSS

@media(max-width:599px) {
md-tooltip.tooltip {
        display: none !important;
    }
}

As per this issue, the md-tooltip is the buggy code.

In that case, I suggest you show the tooltip code based on the condition, i.e. only display the content if you are in a web browser.

For this task, you can use the ng-device-detector lib:

本文标签： javascriptHow to dynamically remove a mdtooltip with Angular MaterialStack Overflow