Problem with tippy tooltip when manipulating the DOM

I have created a file and folder tree in Livewire. I use tippy for creating tooltip on edit/delete links. The problem is that they only works on root folders. When I expand the tree they don't work on any appearing child nodes.

NodeTree.php

<?php

namespace App\Livewire;

use App\Models\Node;
use Livewire\Component;

class NodeTree extends Component
{
    public array $expandedNodes = [];
    public ?string $editingNodeId = null;
    public string $editingNodeName = '';

    public function toggleNode($nodeId): void
    {
        if (in_array($nodeId, $this->expandedNodes)) {
            $this->expandedNodes = array_diff($this->expandedNodes, [$nodeId]);
        } else {
            $this->expandedNodes[] = $nodeId;
        }
        
        // Get all children nodes recursively
        $node = Node::find($nodeId);
        if ($node) {
            $this->dispatch('reinitialize-tooltips', nodeId: $nodeId);
        }
    }

    public function render()
    {
        $nodes = Node::where('parent_id', null)
            ->orderBy('name')
            ->get();

        return view('livewire.node-tree', [
            'nodes' => $nodes
        ]);
    }
}

node-tree.blade.php

<div>
    @foreach($nodes as $node)
        @include('livewire.node-tree-item', [
            'node' => $node,
            'level' => 0
        ])
    @endforeach
</div>

node-tree-item.blade.php

<div class="pl-{{ $level * 4 }}">
    <div class="flex items-center space-x-2 py-1 hover:bg-gray-50 rounded group">
        @if($node->type === 'folder')
            <button
                wire:click="toggleNode('{{ $node->id }}')"
                class="w-4 text-gray-400"
            >
                @if($node->children->count() > 0)
                    <i class="fas fa-chevron-{{ in_array($node->id, $expandedNodes) ? 'down' : 'right' }} text-xs"></i>
                @endif
            </button>

            <i class="fas fa-folder{{ in_array($node->id, $expandedNodes) ? '-open' : '' }} text-yellow-500"></i>
        @else
            <div class="w-4"></div>
            <i class="fas fa-file text-blue-500"></i>
        @endif

        @if($editingNodeId === (string)$node->id)
            <div class="flex-1">
                <input
                    type="text"
                    wire:model="editingNodeName"
                    wire:keydown.enter="saveNodeName"
                    wire:keydown.escape="cancelEditing"
                    class="w-full px-2 py-1 text-sm border rounded"
                    autofocus
                    @blur="$wire.saveNodeName()"
                >
            </div>
        @else
            <span
                wire:click="startEditing({{ $node->id }})"
                class="flex-1 cursor-pointer"
            >
                {{ $node->name }}
            </span>
        @endif

        <div class="hidden group-hover:flex space-x-2 pr-2">
            @if($node->type === 'folder')
                <div data-tippy-content="{{ __('Create a new folder') }}">
                    <button
                        wire:click="createNode('folder', '{{ $node->id }}')"
                        class="text-accent hover:text-accent-dark"
                    >
                        <i class="fas fa-folder"></i>
                    </button>
                </div>
                <div data-tippy-content="{{ __('Create a new file') }}">
                    <button
                        wire:click="createNode('file', '{{ $node->id }}')"
                        class="text-accent hover:text-accent-dark"
                    >
                        <i class="fas fa-file"></i>
                    </button>
                </div>
                @if($node->children->count() === 0)
                    <div data-tippy-content="{{ __('Delete') }}">
                        <x-icon-link wire:click="deleteConfirm('delete', {{ $node->id }})"
                                     icon="trash" class="text-accent cursor-pointer"/>
                    </div>
                @endif
            @else
                <div data-tippy-content="{{ __('Edit') }}">
                    <x-icon-link
                        href="{{ route('nodes.edit', $node) }}"
                        icon="pencil"
                        class="text-accent cursor-pointer"
                    />
                </div>
                @if($node->attachments->count() === 0 && $node->reminders->count() === 0)
                    <div data-tippy-content="{{ __('Delete') }}">
                        <x-icon-link
                            wire:click="deleteConfirm('delete', {{ $node->id }})"
                            icon="trash"
                            class="text-accent cursor-pointer"
                        />
                    </div>
                @endif
            @endif
        </div>
    </div>

    @if($node->type === 'folder' && in_array($node->id, $expandedNodes))
        <div>
            @foreach($node->children as $child)
                @include('livewire.node-tree-item', [
                    'node' => $child,
                    'level' => $level + 1
                ])
            @endforeach
        </div>
    @endif
</div>

script in layout

<script src="https://cdn.jsdelivr.net/npm/tippy.js@6/dist/tippy-bundle.umd.js"></script>
<script>
            document.addEventListener("DOMContentLoaded", function () {
                tippy('[data-tippy-content]', {
                    allowHTML: true,
                    theme: 'light',
                    placement: 'top',
                });
            });
        </script>

LaryAI

1 year ago

Level 58

The issue you're experiencing with Tippy.js tooltips not working on dynamically added child nodes is likely due to the fact that Tippy.js initializes tooltips only once when the page loads. When you expand the tree and new nodes are added to the DOM, those elements are not automatically initialized with tooltips.

To solve this, you need to reinitialize Tippy.js tooltips whenever the DOM is updated. You can achieve this by listening for a custom event in your Livewire component and reinitializing the tooltips.

Here's how you can modify your code to fix the issue:

Modify the Livewire Component:

In your NodeTree component, you are already dispatching a custom event reinitialize-tooltips when nodes are toggled. Ensure this event is being dispatched correctly.

Listen for the Custom Event in JavaScript:

Update your JavaScript to listen for the reinitialize-tooltips event and reinitialize Tippy.js tooltips.

<script src="https://cdn.jsdelivr.net/npm/tippy.js@6/dist/tippy-bundle.umd.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        function initializeTooltips() {
            tippy('[data-tippy-content]', {
                allowHTML: true,
                theme: 'light',
                placement: 'top',
            });
        }

        // Initialize tooltips on page load
        initializeTooltips();

        // Listen for the custom event to reinitialize tooltips
        window.addEventListener('reinitialize-tooltips', function () {
            initializeTooltips();
        });
    });
</script>

Ensure Event Dispatching:

Make sure that the reinitialize-tooltips event is dispatched correctly in your Livewire component. You can do this by using the dispatchBrowserEvent method:

public function toggleNode($nodeId): void
{
    if (in_array($nodeId, $this->expandedNodes)) {
        $this->expandedNodes = array_diff($this->expandedNodes, [$nodeId]);
    } else {
        $this->expandedNodes[] = $nodeId;
    }

    // Dispatch the event to reinitialize tooltips
    $this->dispatchBrowserEvent('reinitialize-tooltips');
}

By following these steps, you ensure that Tippy.js tooltips are reinitialized every time the DOM is updated with new nodes, allowing tooltips to work on dynamically added elements.

Please or to participate in this conversation.