New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow a callback for the tooltip target attribute. #1493

Merged
merged 2 commits into from Feb 18, 2018

Conversation

Projects
None yet
3 participants
@michaelzangl
Contributor

michaelzangl commented Dec 25, 2017

I had a problem using the tooltip component on a column: When referencing the target by ID, the tooltp always appeared at the first column.

An alternative is to reference the target using $refs. I tried to implement this in a universal way by allowing a callback being passed as target attribute.

That way, the following code works:

<td ref="contactColumn">
  column content
  <b-tooltip :target="() => $refs.contactColumn">
    complex tooltip content
  </b-tooltip>
</td>
@codecov

This comment has been minimized.

codecov bot commented Dec 25, 2017

Codecov Report

Merging #1493 into dev will decrease coverage by <.01%.
The diff coverage is 66.66%.

Impacted file tree graph

@@            Coverage Diff             @@
##              dev    #1493      +/-   ##
==========================================
- Coverage   60.32%   60.32%   -0.01%     
==========================================
  Files         153      153              
  Lines        2866     2868       +2     
  Branches      788      789       +1     
==========================================
+ Hits         1729     1730       +1     
- Misses        818      819       +1     
  Partials      319      319
Impacted Files Coverage Δ
src/mixins/toolpop.js 33.33% <66.66%> (+0.33%) ⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update f6ddc62...27f5d28. Read the comment docs.

@tmorehouse

This comment has been minimized.

Member

tmorehouse commented Dec 27, 2017

Tooltips will accept a reference an element, or an id, but either method the element must exist in the document before it can find the element to attach the event listeners to.

@michaelzangl

This comment has been minimized.

Contributor

michaelzangl commented Dec 30, 2017

Yes, that was exactly what my problem was: The references were not parsed by VUE before the attributes were evaluated. Using the callback solved it for me.

If you have any other working/clean way of writing those, I would appreciate it:

<b-tooltip :target="() => $el">
<b-tooltip :target="() => $refs.parentElement">

(Background: I need complex tooltips that contain some html / other components and I need the tooltip on the root element of the component, which is a td in many cases)

Edit: One second thing I noticed is that the ID based approach in the docs is not so good for use in production. If the component is included in the same page multiple times, you can have ID conflicts and the tooltips appear on the wrong element. It might be better to change the docs so that refs are used instead of ids.

@pi0 pi0 requested a review from tmorehouse Jan 3, 2018

@mosinve mosinve removed the request for review from tmorehouse Feb 18, 2018

@mosinve mosinve merged commit 048c3d4 into bootstrap-vue:dev Feb 18, 2018

4 checks passed

ci/circleci Your tests passed on CircleCI!
Details
codecov/patch 66.66% of diff hit (target 60.32%)
Details
codecov/project Absolute coverage decreased by -<.01% but relative coverage increased by +6.33% compared to f6ddc62
Details
deploy/netlify Deploy preview ready!
Details
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment