Tooltip doesn't work on {{paper-switch}}
bedrosenator opened this issue · comments
Hi. I've updated ember-tooltip to v3.2.0
I've noticed that tooltip doesn't appear in case of using paper-switch. It attaches trigger to sibling but not to parent element. It works only if I set target as paper-select. In 2.x it works well.
And also you forgot to mention in the migration doc that target changed to targetId
Rendered html
<div class="override-switch d-f ai-c">
<span class="override-label">Override</span>
<md-switch tabindex="0" id="ember872" class="paper-switch md-default-theme md-primary ember-view" style="touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<div class="md-switch-bar"></div>
<div class="md-container" style="touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<div class="md-bar"></div>
<div class="md-thumb-container" style="">
<div class="md-thumb md-ink-ripple">
<div class="md-ripple-container"></div></div>
</div>
</div>
<div class="md-label ember-tooltip-target">
<div id="ember877" class="ember-tooltip-base ember-view">
<div id="ember880" class="ember-view">
<div></div>
</div>
</div>
</div>
</md-switch>
</div>
Hbs
Sorry it's taken me so long to take a look at this.
It seems that it occurs when there is no other content inside the paper-switch
. This results in the .md-label
element not having a width or height, which prevents it from being toggled on mouseover, as there is no target to interact with. (The target will, by default, be the .md-label
element within the paper-switch
component)
The solutions that I can think of are:
- Provide some label contents
- Customize the CSS of the
.md-label
for the specificpaper-switch
invocation to exist as a workable hover target. Could maybe give it a relative position and move it over the switch? - Could maybe try specifying
targetId
where the value is the ID of thepaper-switch
element and setside
toleft-start
(by default tooltips are centered, andpaper-switch
seems to take full width by default, so your mileage may vary here)
Ideally, it seems you'd want to attach it to the .md-container
inside paper-switch
instead, but there doesn't seem to be a way with ember-paper
to attach an ID to that, as far as I can tell.
Closing this, as I believe it's not something that's fixable within ember-tooltips, and requires special handling in either the application or ember-paper