#Trying to show a nice popover when you hover over an author of a post with a blade component

39 messages · Page 1 of 1 (latest)

simple nexus
#

I want to have something like Twitter has when you hover over a tweet author and display a nice popover with the author details like shown in the attached image.
I created a new blade component php artisan make:component PopoverProfile and passed the post(imp) variable to it:

    /**
     * Create a new component instance.
     *
     * @return void
     */
    public function __construct(Imp $imp)
    {
        $this->imp = $imp;
    }```
Then on the `popover-profile.blade.php` I have the following code (next message).
Laravel-on-Twitter-Vapor-now-allows-you-to-set-the-maximum-concurrency-of-individual-queues-This-feature-can-help-you-ensure-no-single-queue-is-able-to-consume-all-of-the-concurrency-available-to-your-AWS-accou_1.png
# 
    <div class="p-3">
        <div class="flex items-center justify-between mb-2">
          @if (!empty($imp->user->avatar))
            <a href="/profile/{{ $imp->user->id }}">
                <img class="w-10 h-10 rounded-full shadow-lg object-cover" src="/avatars/{{ $imp->user->avatar }}" alt="{{ $imp->user->name }}">
            </a>
            @else
            <a href="/profile/{{ $imp->user->id }}">
              <img class="w-10 h-10 rounded-full shadow-lg object-cover" src="/avatars/noavatar.png" alt="{{ $imp->user->name }}">
            </a>
          @endif
            <div>

            </div>
        </div>
        <p class="text-base font-semibold leading-none text-gray-900 dark:text-white">
            <a href="/profile/{{ $imp->user->id }}">{{ $imp->user->name }}</a>
        </p>
        <p class="mb-3 text-sm font-normal">
            <a href="/profile/{{ $imp->user->id }}" class="hover:underline">{{'@'}}{{ $imp->user->username }}</a>
        </p>
        <p class="mb-4 text-sm font-light">{{ $imp->user->description }}</p>
        <ul class="flex text-sm font-light">
            <li class="mr-2">
                <a href="#" class="hover:underline">
                    <span class="font-semibold text-gray-900 dark:text-white">{{ $imp->user->following()->get()->count() }}</span>
                    <span>Urmăriți</span>
                </a>
            </li>
            <li>
                <a href="#" class="hover:underline">
                    <span class="font-semibold text-gray-900 dark:text-white">{{ $imp->user->followers()->get()->count() }}</span>
                    <span>Urmăritori</span>
                </a>
            </li>
        </ul>
    </div>
    <div data-popper-arrow></div>
  </div>```
#

Then I placed the component code <x-popover-profile :imp="$imp"/> at the top of the username code in my posts index page. The popover workes, I mean it is showing, but it only shows with the details from the first post author. And if I go to page 2 on the posts page it does not show anymore, no popover, but if I refresh the same page, page 2, it will start to show again with the first post author's details. I don't know what's going on.

#

I guess I can't place the component in a loop like that, or maybe make another loop in the component?

rocky plank
simple nexus
# rocky plank Show us

The code is to big for posting...the component is just above the <a> with the imp(post) author in the imps loop.

rocky plank
#

Well, trim it down to just the relevant parts. Show us how you're looping and how you're calling the component.

#

Also are you using livewire or just plain blade templates?

#

Wait before that, the first line of your popover blade shows id="..." is that something you edited before posting or are all your popovers literally trying to use ... as an id?

simple nexus
rocky plank
#

Well, same problem there. They all have the same id?

#

Also for future reference please don't edit code that you're having issues with. The problem might just end up being in the bit you edited out

simple nexus
#

damn, so that is the problem, they have the same id?

rocky plank
#

Probably. I don't know how you're triggering the popovers, but I'm guessing you're trying to find them by id

#

Which would explain why it's always the first one that gets shown

simple nexus
# rocky plank Probably. I don't know how you're triggering the popovers, but I'm guessing you'... 
                <div class="p-4 flex space-x-2">
                    @if (!empty($imp->user->avatar))
                    <a href="/profile/{{ $imp->user->id }}"><img src="/avatars/{{ $imp->user->avatar }}" class="w-9 h-9 mx-auto rounded-full ring-2 ring-gray-300 shadow-lg object-cover"></a>
                    @else
                    <a href="/profile/{{ $imp->user->id }}"><img src="/avatars/noavatar.png" class="h-9 w-9 mx-2 rounded-full ring-2 ring-gray-300 shadow-lg object-cover" alt="Fără Poză"></a>
                    @endif
                    <div class="flex-1">
                        <div class="flex justify-between items-center">
                            <div>
                                @include('imps.partials.profile-popover')
                                <a href="/profile/{{ $imp->user->id }}" class="ml-1 text-gray-800" data-popover-target="popover-profile-{{ $imp->user->id }}">{{ $imp->user->name }}</a>
                                <small class="ml-2 text-sm text-gray-600"><a href="{{ route('imps.show', $imp) }}" title="{{ $imp->created_at->format('d-m-Y') }}">{{ $imp->created_at->diffForHumans() }}</a></small>
                                @unless ($imp->created_at->eq($imp->updated_at))
                                    <small class="text-sm text-red-600"> &middot; {{ __('app.imp_edited') }}</small>
                                @endunless
                            </div>```
#

this is the first part of the loop

#

I did changed the id to add the user id but now the popover is not showing at all

rocky plank
#

None of this tells me how the popup actually triggers

#

oh there it is

#

data-popover-target I guess

simple nexus
#

yes

rocky plank
#

Did you also change the id in the profile-popover partial?

simple nexus
#

yes to id="popover-profile-{{ $imp->user->id }}"

rocky plank
#

Again I don't know how your popovers work. Is whatever is triggering the popover using data-popover-target as an id or as a css selector?

simple nexus
#

I use flowbite with tailwind...

rocky plank
#

I don't know what that is

simple nexus
#

I am using the second popover

rocky plank
#

ok so that should be the ID there

simple nexus
#

yes

#

but why is it not working?

rocky plank
#

Any errors in your console?

simple nexus
#

none that I see

rocky plank
#

Check the rendered html to make sure all your ids match

#

There's no reason it should work when everything has the same id but not work when things have distinct ids

#

What you showed isn't actually using a component though, just importing a partial

simple nexus
#

Yeah, a typo ruined it, thank you very much for helping!

#

It is working now