Add tooltip to link in transaction log
This commit is contained in:
@@ -1,11 +1,17 @@
|
||||
@props(['content', 'url', 'searchId' => ''])
|
||||
@props(['content', 'url', 'searchId' => '', 'tooltip' => ''])
|
||||
|
||||
<div>
|
||||
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm" {{ $attributes->merge(['colspan' => '']) }}>
|
||||
<div class="flex items-center">
|
||||
<div class="ml-5">
|
||||
<a class="text-blue-400 whitespace-no-wrap hover:underline" href="{{ $url }}"
|
||||
target="_blank">{{ $content }}</a>
|
||||
<a class="text-blue-400 whitespace-no-wrap hover:underline relative" href="{{ $url }}"
|
||||
target="_blank" x-data="{ tooltip: false }" @mouseenter="tooltip = true" @mouseleave="tooltip = false">
|
||||
{{ $content }}
|
||||
<div x-cloak x-show="tooltip" class="absolute bg-gray-800 text-white text-xs rounded py-1 px-2 bottom-full left-1/2 transform -translate-x-1/2 mb-2">
|
||||
{{ $tooltip }}
|
||||
<svg class="absolute text-gray-800 h-2 w-full left-0 top-full" x="0px" y="0px" viewBox="0 0 255 255" xml:space="preserve"><polygon class="fill-current" points="0,0 127.5,127.5 255,0"/></svg>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
@if ($searchId != '')
|
||||
<a class="p-1 rounded-md text-black-400 whitespace-no-wrap cursor-pointer {{ $searchId }} hover:bg-green-600 hover:text-white transition-all duration-300">
|
||||
@@ -16,3 +22,9 @@
|
||||
</div>
|
||||
</td>
|
||||
</div>
|
||||
|
||||
@push('additional_styles')
|
||||
<style>
|
||||
[x-cloak] { display: none !important; }
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
@@ -30,9 +30,9 @@
|
||||
<x-table.data-status-orb :content="$data['update_status']" />
|
||||
<x-table.data-status-orb :content="$data['update_serahan']" />
|
||||
<x-table.data :content="$data['status']" />
|
||||
<x-table.data-link :content="$data['billplz_id']" :url="route('transaction.online.log.show', $data['billplz_id'])" searchId="search_billplz_id" />
|
||||
<x-table.data-link :content="$data['norujukan']" :url="route('transaction.online.gadaian', $data['norujukan'])" searchId="search_norujukan" />
|
||||
<x-table.data-link :content="$data['total_payment']" :url="route('transaction.online.billplz-transaction-review.show', $data['billplz_id'])" />
|
||||
<x-table.data-link :content="$data['billplz_id']" :url="route('transaction.online.log.show', $data['billplz_id'])" searchId="search_billplz_id" tooltip="View Log" />
|
||||
<x-table.data-link :content="$data['norujukan']" :url="route('transaction.online.gadaian', $data['norujukan'])" searchId="search_norujukan" tooltip="View Gadai Detail" />
|
||||
<x-table.data-link :content="$data['total_payment']" :url="route('transaction.online.billplz-transaction-review.show', $data['billplz_id'])" tooltip="Refer Billplz" />
|
||||
<x-table.data :content="$data['paid_at']" />
|
||||
<x-table.data :content="$data['nokp']" />
|
||||
<x-table.data :content="$data['customer_name']" />
|
||||
|
||||
Reference in New Issue
Block a user