Material: md-tooltip not working inside disabled md-tab
<md-tab id="tab2" aria-controls="tab2-content" ng-disabled="true">
Some Title
<md-tooltip>
This Feature is not available yet
</md-tooltip>
</md-tab>
the tooltip is disabled too and don't works on hover.
and1gio
All 48 comments
After a little investigation of this issue, there seems to be two issues here:
- When rendering the tooltip, the tab does not get the 'pointer-events: none', yet. This means that while debugging with this line of code (inside tooltip's code)
while ($window.getComputedStyle(parent[0])['pointer-events'] == 'none')
it wasn't true, although it was supposed to be. I guess this is related somehow to Angular's rendering order (ng-disabled is executing after tabs directive. If I change ng-disabled to disabled="{{exp}}" this problem is fixed. But, this does not work on old i.e browsers). This JSBin demonstrates the problem: http://jsbin.com/birusemela/2/edit?html,css,js,console,output - After hard-coding 'pointer-events: none;' on the tab element, just in order to debug this, I see that this code section
while ($window.getComputedStyle(parent[0])['pointer-events'] == 'none') {
parent = parent.parent();
}
will have 'parent' as the 'md-header-items' element (in my test). This is not good as a tooltip's parent and will not work. I guess the 'quick and dirty' solution in this case will be to wrap the '
Is it possible to contribute here? I was reading earlier that you are not ready for contributing. I am willing to contribute to this awesome project, but I'm not sure that I'm not waisting my time here.... (:
yanivefraim
on 28 Feb 2015
Same issue with md-button. If disabled, then tooltips do not display.
gbruins
on 2 Mar 2015
Hey,
- I succeeded to solve the first issue (see my first comment describing the causes above) by applying this solution http://stackoverflow.com/questions/28787241/angularjs-ng-disabled-execution-order-on-a-directive.
I'm not sure it is acceptable to wrap the code with $timeout. - The second issue is caused by the wrong search for tooltip's parent. There are actually two tooltip parent elements here. Both are wrong:
a. 'tooltipParent' variable, which is responsible for appending the tooltip to. This element is based on 'md-content' element or 'body'. Both are not good as tooltip location...
b. 'parent' which is responsible for mouse/touch event listeners. This element is based on the first element with 'pointer-events' != 'none'. This is a wrong choice as well. For example, in the tabs, this element is the tabs directives, which will trigger the tooltip for all tab elements (instead of only the desired one)
I'm not sure how exactly this (section 2) can be solved without a massive code refactoring. I have no idea who can I talk to here to get advises, and I would love to contribute and fix this issue (already invested several hours in this issue)
yanivefraim
on 2 Mar 2015
+1 for making tooltips available inside of ng-disabled. I think its a common case that user wants to disable a button and the tooltip states why the action is not available (yet). I solved it with wrapping the button inside of a span but it might be clean if the tooltip would be available.
dohomi
on 12 Jun 2015
+1. Tooltip on a disabled control is actually important to communicate why it's disabled
SergeyBukhman
on 22 Jun 2015
+1 for making tooltips available on disabled elements.
houmark
on 6 Jul 2015
+1
rgolea
on 6 Jul 2015
+1
FlemmingBehrend
on 31 Jul 2015
@dohomi could you share your workaround? I've tried this but it doesn't work. Thanks.
Oh, and +1.
john2x
on 12 Aug 2015
@john2x
I just changed the span to div, and then you'll see how it works. In general it means, that if you'd choose span as the container just add a few more lines of CSS. Cheers
dohomi
on 13 Aug 2015
+1
yochayme
on 26 Aug 2015
+1
du6
on 15 Sep 2015
@dohomi Sadly your workaroud didn't work for me, nor in my project nor on codepen.
Anyway +1 for the issue!
ocReaper
on 18 Sep 2015
+1 here too. Would be pretty handy. :)
doppio
on 29 Oct 2015
+1
Yannic92
on 5 Nov 2015
+1
BenniG82
on 9 Nov 2015
+1
alohaglenn
on 11 Nov 2015
+1
EvgenStudent
on 17 Nov 2015
+1
kaldebert
on 18 Nov 2015
+1
joeyperson
on 24 Nov 2015
+1
JanSchuermannPH
on 1 Dec 2015
+1
janvandenberg
on 2 Dec 2015
+1
thandaanda
on 7 Dec 2015
+1
tobsl
on 7 Dec 2015
+1
Ross-Rawlins
on 11 Dec 2015
+1
DomenicD
on 14 Dec 2015
+1
nielslucas
on 14 Dec 2015
+1
tuchk4
on 30 Dec 2015
quickie @dohomi fork that seems to be working
http://codepen.io/anon/pen/adVvLQ?editors=100
and +1 (: ofc
nissoh
on 18 Jan 2016
+1 really need this
cmacdonnacha
on 15 Feb 2016
+1
jaGarcia
on 17 Feb 2016
+1, the workaround with the div tag works, but sometimes it has a different (and extrange) behavior and the tooltip doesn't disappear.
j-ramirez-bi4group
on 22 Feb 2016
+1
nmousa
on 7 Mar 2016
+1
KelvinOm
on 15 Mar 2016
Add for this http://codepen.io/anon/pen/adVvLQ?editors=100
css like this:
.md-button:disabled {
z-index: -1;
}
work better!
KelvinOm
on 15 Mar 2016
Very nice!
Sent from my iPhone
On Mar 15, 2016, at 9:42 AM, Валерий [email protected] wrote:
Add for this http://codepen.io/anon/pen/adVvLQ?editors=100
css like this:
.md-button:disabled {
z-index: -1;
}work better!
—
You are receiving this because you commented.
Reply to this email directly or view it on GitHub:
https://github.com/angular/material/issues/1667#issuecomment-196822548
jaGarcia
on 15 Mar 2016
+1 really need this
smfiorillo
on 21 Apr 2016
+1
francittadini
on 21 Apr 2016
So now all the tracked issues people have posted and +1 on are just closed due to spring cleaning? So we just repost them all again? They don't get fixed by closing them. While I understand cleaning up is needed, some items are easily removed, while others should stay to be tracked.
This one is fairly simple, and heavily requested so I don't see how it fits the criteria for spring cleaning.
The issue has a working test fork, and there's no workaround I'm aware of.
houmark
on 28 Apr 2016
@ThomasBurleson The above comment was directed at you.
houmark
on 28 Apr 2016
+1
pablozandona
on 3 May 2016
So now all the tracked issues people have posted and +1 on are just closed due to spring cleaning?
I've run into half a dozen issues like this one that have been heavily requested, but closed with no explanation or fix. Really destroys confidence. :-1:
Lykathia
on 7 Jun 2016
@houmark - thx for the ping. Based on the +1(s), this should be reopened.
This is also, btw, part of our policy... that we can reopen with new PR, significant, +1(s), or easy fix. Thanks again.
ThomasBurleson
on 7 Jun 2016
Hey everyone. I understand that this is a pretty common use case and has been open for a while, however I don't see a good way of solving it within Material. The issue here is that if certain elements are disabled, the browser just won't fire any events from them, which seems to be according to the spec. I see a few ways of working around it:
- Keeping track of the coordinates of the mouse pointer/taps and matching them to the parent element.
- Wrapping the parent in another node and listening for events there.
- Listening for the mouse events on non-disabled children of the disabled element.
Neither of these are good solutions, because they're either unreliable, bad for performance or might produce unexpected results. On the other hand, it should be simple to work around it in your own project. Here are a few ways of doing it, some of which have also been posted above.
- Move the tooltip outside the disabled element and wrap it in another one:
``` html
Button
```
- Another way, while not very semantic, is to change the node type. For example, disabled divs still fire mouse events. The following looks identical and will show the tooltip:
``` html
Button
```
- Similar to 1, except applying the tooltip to a child of the disabled element:
``` html
Button
Button
```
Finally, we're always open to suggestions about how we could get around this properly.
crisbeto
on 8 Jun 2016
+1
jobo26
on 17 Jun 2016
Closing since we can't do much about this and there are ways to work around it.
crisbeto
on 19 Jul 2016
Just add the content of button under span:
<button class="btn btn-primary btn-md"
ng-click="Submit" ng-disabled="!enableSubmit">
<span>
Submit <i class="fa fa-check" aria-hidden="true"></i>
<md-tooltip md-direction="top">Submit not Available</md-tooltip>
</span>
</button>
This worked for me
rushiraj111
on 1 Sep 2017
Thank you, rushiraj111!!
dtrenin7
on 26 Sep 2017
Related issues
ghost
·
3Comments
bobber205
·
3Comments
pablorsk
·
3Comments
chriseyhorn
·
3Comments
PeerInfinity
·
3Comments
Most helpful comment
Hey everyone. I understand that this is a pretty common use case and has been open for a while, however I don't see a good way of solving it within Material. The issue here is that if certain elements are disabled, the browser just won't fire any events from them, which seems to be according to the spec. I see a few ways of working around it:
Neither of these are good solutions, because they're either unreliable, bad for performance or might produce unexpected results. On the other hand, it should be simple to work around it in your own project. Here are a few ways of doing it, some of which have also been posted above.
``` html
Tooltip
Button
```
``` html
Tooltip
Button
Button
```
``` html
Tooltip
Button
Button
```
Finally, we're always open to suggestions about how we could get around this properly.