UITooltip doesn't work inside some VueComponents

[mcmillenb]

I tried to add a <ui-tooltip> to a <ui-button> like so:

<ui-button ref="edit-btn">
  Edit
  <ui-tooltip trigger="edit-btn">
    Select an element to edit
  </ui-tooltip>
</ui-button>

And get an error:

Tooltip Error: You must provide a target for Tooltip to attach to

The problem is in UiTooltip.vue:

The initialize() method creates a new Tooltip object, passing this.$parent.$refs[this.trigger], as the target. However, the UiButton template wraps the content of the button in a div, so this.$parent is that wrapper div, and not the root element containing the ref value.

This is my workaround for now:

<div ref="edit-btn">
  <ui-button>
    Edit
  </ui-button>
  <ui-tooltip trigger="edit-btn">
    Select an element to edit
  </ui-tooltip>
</div>

[EmilMoe]

This is how it's supposed to work to my understanding. You don't wrap a tooltip inside a button, the button just activates it.

[mcmillenb]

No, I don't think so. Unless you mean tooltips for ui-button components specifically are handled differently?

ui-tooltip components affect their parent element. See the docs source code:

<div class="image-pane" ref="image" :style="{ 'background-image': 'url(' + image + ')' }">
    <ui-tooltip trigger="image" :position="tooltipPosition">{{ name }}</ui-tooltip>
</div>

[lavezzi1]

UiTooltip doesn't work inside Ui-Tabs and v-for

[zdpeitang]

same issue, even workaround doesn't work for me.

[lavezzi1]

Any workaround or solution for that issue mr. @JosephusPaye ?

[JosephusPaye]

This has been fixed in d8edc31.

The workaround @mcmillenb posted can be used until the next version.

[hakobtorosyan]

Hi all.I have ui-tooltip inside for loop.It doesn' t work.Have anybody solution for it?

[JosephusPaye]

In the upcoming version, you can also use a CSS selector for the trigger:

<ui-button id="edit-btn">Edit</ui-button>
<ui-tooltip trigger="#edit-btn">Select an element to edit</ui-tooltip>

To try it:

# npm
npm install keen-ui@JosephusPaye/Keen-UI#next

# yarn
yarn add keen-ui@JosephusPaye/Keen-UI#next

See the changelog for all changes.

[JosephusPaye]

Released in v1.1.0.