Tooltip only renders blank span in block format

[Jiro Farah]

After upgrading from 2.x to 3.x, all the tooltips have stopped working. I changed the syntax according to the 3.3.0 but the tooltips still are not showing up.

Here is how I am using the tooltip on elements with target ids.

{{#each events as |event|}}
  {{#ember-tooltip tooltipClass="event_tooltip" side='bottom' targetId=(concat "event_id_" event.id)}}
    <h5>{{event.title}}</h5>
    <p>Status: {{event.status}}</p>
  {{/ember-tooltip}}
{{/each}}

This would render a div with the class event_tooltip ember-tooltip as a sibling to the div with associated Id, however the tooltip div only has an empty span. The ember-tooltip-base which has the contents that I need in the tooltip is not being rendered in the right place.

Note: There are no console errors.

ember-tooltips: ^3.3.0

ember-cli: 3.4.4
node: 8.12.0

[Max Fierke]

Hi @jir-f, would you be able to share a sample of the rendered HTML or a reproduction on Ember Twiddle? I think I understand how you're using it, but I want to be sure.

Note: targetId does not change where the tooltip renders in DOM, just what the rendered tooltip attaches itself to.

[Jiro Farah]

Hi @maxfierke Thanks for your response.
Here is a simpler example of how the ember-tooltip is being used and what is being rendered.
This is happening whether I'm using the ember-tooltip with or without targetId.

{{#navbar.nav as |nav|}}
  {{#nav.item}}
    {{#nav.link-to 'task-calendar'}}
      {{#ember-tooltip side='left'}}
        <span>Your Calendar</span>
      {{/ember-tooltip}}
      <i class="fa fa-calendar fa-lg" />
    {{/nav.link-to}}
  {{/nav.item}}
  {{#nav.item}}
    {{#nav.link-to 'my-tasks.index'}}
      {{#ember-tooltip side='left'}}
        <span>Your Tasks</span>
      {{/ember-tooltip}}
      <i class="fa fa-check-square-o fa-lg" />
    {{/nav.link-to}}
  {{/nav.item}}
{{/navbar.nav}}

The rendered HTML:

<ul id="ember653" class="nav navbar-nav ember-view">
  <li id="ember654" class="nav-item ember-view"><a href="/task-calendar" id="ember655"
      class="nav-link ember-view ember-tooltip-target" aria-describedby="tooltip_yp33t3abqx" title="">
      <div id="ember656" class="ember-tooltip-base ember-view">
        <div id="ember657" class="ember-view">
          <div>
            <span>Your Calendar</span>

          </div>
        </div>
      </div> <i class="fa fa-calendar fa-lg"></i>
    </a>
    <div class="tooltip ember-tooltip ember-tooltip-effect-slide" role="tooltip"
      style="margin: 0px 10px 0px 0px; position: absolute; will-change: transform; visibility: hidden; top: 0px; left: 0px; transform: translate3d(1664px, 17px, 0px);"
      id="tooltip_yp33t3abqx" aria-hidden="true" x-placement="left">
      <div class="tooltip-arrow ember-tooltip-arrow" style="top: 0px;"></div>
      <div class="tooltip-inner ember-tooltip-inner" id="ember656-wormhole">
          <span></span>
     </div>
    </div>
  </li>
  <li id="ember658" class="nav-item ember-view"><a href="/my-tasks" id="ember659"
      class="nav-link ember-view ember-tooltip-target" aria-describedby="tooltip_4lahc0ppx5" title="">
      <div id="ember660" class="ember-tooltip-base ember-view">
        <div id="ember661" class="ember-view">
          <div>
            <span>Your Tasks</span>

          </div>
        </div>
      </div> <i class="fa fa-check-square-o fa-lg"></i>
    </a>
    <div class="tooltip ember-tooltip ember-tooltip-effect-slide" role="tooltip"
      style="margin: 0px 10px 0px 0px; position: absolute; will-change: transform; visibility: hidden; top: 0px; left: 0px; transform: translate3d(1695px, 17px, 0px);"
      id="tooltip_4lahc0ppx5" aria-hidden="true" x-placement="left">
      <div class="tooltip-arrow ember-tooltip-arrow" style="top: 0px;"></div>
      <div class="tooltip-inner ember-tooltip-inner" id="ember660-wormhole">
          <span></span>
      </div>
    </div>
  </li>
</ul>

[Jiro Farah]

@maxfierke After going through some code I found that the ember-wormhole dependency version was different on the library than the one in my project. ember-tooltips uses ember-wormhole v0.5.5 and my project used ember-wormhole v0.5.4. Bumping the version to 0.5.5 resolved the issue and the tooltips render.

Just wanted to let you know. Thanks for your help.

[Max Fierke]

Ohhh, yeah, that'd do it! Thanks for letting me know! I thought this issue looked familiar 😄

Future viewers: Ensure you're on ember-wormhole >= 0.5.5 at the application-level, if you depend on ember-wormhole in your app.

[Mani Tamilarasan]

@maxfierke still am facing the same issue after upgrading ember-wormhole >= 0.5.5. my ember-wormhole available in devDependicies.