Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
Allow a callback for the tooltip target attribute. #1493
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>
@@ 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
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.