sir-dunxalot / ember-tooltips

Easy and extendible tooltips for Ember components - http://sir-dunxalot.github.io/ember-tooltips/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

{{#paper-switch value=someValue onChange=(action (mut obj.value)) primary=true}}
  {{#ember-tooltip delay=500}}
    Some tooltip text
  {{/ember-tooltip}}
{{/paper-switch}}

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 specific paper-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 the paper-switch element and set side to left-start (by default tooltips are centered, and paper-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