I want to show customer data in a bootstrap popover.
I am using livewire datatable to show customers. when click customer user name I want to show a popover with customer details.
this is the table which I show user name
user name get by this code
<div>
<a title="simulate" data-html="true" data-container="body" data-toggle="popover"
data-placement="bottom" href="javascript:void(0);"
onclick="openCustomerPopup('{{ $user->id }}')">
{{ $user->first_name .' ' .$user->last_name}}</a>
</div>
<script>
function openCustomerPopup(customerId) {
console.log(customerId);
@this.emit('showUserPopover', customerId);
}
function closePopover() {
@this.emit('closeUserPopover');
}
</script>This is the livewire to get the customer details
class CustomerPopover extends Component
{
public $isOpen = false;
public $customer = null;
protected $listeners = [
'closeUserPopover',
'showUserPopover' => 'open',
];
public function open($customerId)
{
$this->customer = CustomerFacade::get($customerId);
$this->isOpen = true;
}
public function closeUserPopover()
{
$this->isOpen = false;
}
public function render()
{
return view('livewire.customer-popover');
}
}this is the blade which i call from livewire
<div>
@if($isOpen)
<div>
<h3>{{ $customer->first_name }}</h3>
<div>{{ $customer->last_name }}</div>
</div>
@endif
</div>How can I show this rendering blade as popover's "data-content"
If anyone know it is helpful..