Add support for <Tippy> as a child (issue #123 in 6.x)
Having <Tippy> as a child of an element to tooltip was a nice use-case in 4.x. See https://github.com/KABBOUCHI/vue-tippy/issues/123. We re-add this in a similar manner. Using to="parent" (as a fixed string), one can now use either the main <Tippy> slot ("default") or its specific "content" slot to specify the tooltip content. The tooltip will be triggered on the parent element without adding a specifc Tippy node to the DOM. This should provides a non-interfering way to specify tooltips. Implementation: For the to="parent" case, we need to find the parent DOM element, but in the "worst" case <Tippy> won't render any DOM nodes at all, which could help us to find the parent. Instead, we initially render a hidden <span> (and the tooltip content). Using the span as a template ref ('findParentHelper'), we can get the parent and assign that to the actual 'elem' ref. This will trigger a re-render, where we can drop the helper <span> again.
This commit is contained in:
@@ -88,6 +88,33 @@
|
||||
</tippy>
|
||||
</div>
|
||||
|
||||
<div class="mt-6">
|
||||
<span class="font-semibold mr-4">Tippy as a child component with prop content:</span>
|
||||
|
||||
<button class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg">
|
||||
Hi
|
||||
<tippy to="parent" content="Test"></tippy>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="mt-6">
|
||||
<span class="font-semibold mr-4">Tippy as a child component with #content template:</span>
|
||||
|
||||
<button class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg">
|
||||
Hi
|
||||
<tippy to="parent"><template #content>Test</template></tippy>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="mt-6">
|
||||
<span class="font-semibold mr-4">Tippy as a child component with direct content:</span>
|
||||
|
||||
<button class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg">
|
||||
Hi
|
||||
<tippy to="parent">{{counter}} and counting</tippy>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="mt-6">
|
||||
<span class="font-semibold mr-4">useTippy + callbacks(console.log):</span>
|
||||
<button
|
||||
|
||||
Reference in New Issue
Block a user