Add tooltip to link in transaction log

This commit is contained in:
Afiq Hamzah
2024-10-08 10:08:09 +08:00
parent 1f14754519
commit 527cde014b
2 changed files with 18 additions and 6 deletions
@@ -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']" />