summary component tooltip issue solved..

This commit is contained in:
Cüneyt Şentürk 2022-07-28 18:34:34 +03:00
parent ca3914e84b
commit e7feb944de
2 changed files with 245 additions and 131 deletions

View File

@ -4,17 +4,33 @@
@elseif (! empty($items)) @elseif (! empty($items))
@foreach ($items as $item) @foreach ($items as $item)
<div @class(['w-1/2 sm:w-1/3 text-center'])> <div @class(['w-1/2 sm:w-1/3 text-center'])>
<a href="{{ $item['href'] }}" class="group"> @if (! empty($item['tooltip']))
@php $text_color = (! empty($item['text_color'])) ? $item['text_color'] : 'text-purple group-hover:text-purple-700'; @endphp <x-tooltip id="tooltip-summary-first" placement="top" message="{!! $first->attributes->get('tooltip') !!}">
<div @class(['relative text-xl sm:text-6xl', $text_color, 'mb-2'])> <a href="{{ $item['href'] }}" class="group">
{!! $item['amount'] !!} @php $text_color = (! empty($item['text_color'])) ? $item['text_color'] : 'text-purple group-hover:text-purple-700'; @endphp
<span class="w-8 absolute left-0 right-0 m-auto -bottom-1 bg-gray-200 transition-all group-hover:bg-gray-900" style="height: 1px;"></span> <div @class(['relative text-xl sm:text-6xl', $text_color, 'mb-2'])>
</div> {!! $item['amount'] !!}
<span class="w-8 absolute left-0 right-0 m-auto -bottom-1 bg-gray-200 transition-all group-hover:bg-gray-900" style="height: 1px;"></span>
</div>
<span class="font-light mt-3"> <span class="font-light mt-3">
{!! $item['title'] !!} {!! $item['title'] !!}
</span> </span>
</a> </a>
</x-tooltip>
@else
<a href="{{ $item['href'] }}" class="group">
@php $text_color = (! empty($item['text_color'])) ? $item['text_color'] : 'text-purple group-hover:text-purple-700'; @endphp
<div @class(['relative text-xl sm:text-6xl', $text_color, 'mb-2'])>
{!! $item['amount'] !!}
<span class="w-8 absolute left-0 right-0 m-auto -bottom-1 bg-gray-200 transition-all group-hover:bg-gray-900" style="height: 1px;"></span>
</div>
<span class="font-light mt-3">
{!! $item['title'] !!}
</span>
</a>
@endif
</div> </div>
@endforeach @endforeach
@else @else
@ -23,27 +39,41 @@
@elseif (! empty($first)) @elseif (! empty($first))
<div class="w-1/2 sm:w-1/3 text-center"> <div class="w-1/2 sm:w-1/3 text-center">
@if ($first->attributes->has('tooltip')) @if ($first->attributes->has('tooltip'))
<x-tooltip id="tooltip-summary-first" placement="top" message="{!! $first->attributes->get('tooltip') !!}"> <x-tooltip id="tooltip-summary-first" placement="top" message="{!! $first->attributes->get('tooltip') !!}">
@endif
@if ($first->attributes->has('href'))
<a href="{{ $first->attributes->get('href') }}" class="group">
@endif
@php $text_color = $first->attributes->has('text-color') ? $first->attributes->get('text-color') : 'text-purple group-hover:text-purple-700'; @endphp
<div @class(['relative text-xl sm:text-6xl', $text_color, 'mb-2', $first->attributes->get('class')])>
{!! $first->attributes->get('amount') !!}
<span class="w-8 absolute left-0 right-0 m-auto -bottom-1 bg-gray-200 transition-all group-hover:bg-gray-900" style="height: 1px;"></span>
</div>
@if ($first->attributes->has('href')) <span class="font-light mt-3">
<a href="{{ $first->attributes->get('href') }}" class="group"> {!! $first->attributes->get('title') !!}
@endif </span>
@php $text_color = $first->attributes->has('text-color') ? $first->attributes->get('text-color') : 'text-purple group-hover:text-purple-700'; @endphp @if ($first->attributes->has('href'))
<div @class(['relative text-xl sm:text-6xl', $text_color, 'mb-2', $first->attributes->get('class')])> </a>
{!! $first->attributes->get('amount') !!} @endif
<span class="w-8 absolute left-0 right-0 m-auto -bottom-1 bg-gray-200 transition-all group-hover:bg-gray-900" style="height: 1px;"></span>
</div>
<span class="font-light mt-3"> </x-tooltip>
{!! $first->attributes->get('title') !!} @else
</span> @if ($first->attributes->has('href'))
@if ($first->attributes->has('href')) <a href="{{ $first->attributes->get('href') }}" class="group">
</a> @endif
@endif @php $text_color = $first->attributes->has('text-color') ? $first->attributes->get('text-color') : 'text-purple group-hover:text-purple-700'; @endphp
<div @class(['relative text-xl sm:text-6xl', $text_color, 'mb-2', $first->attributes->get('class')])>
{!! $first->attributes->get('amount') !!}
<span class="w-8 absolute left-0 right-0 m-auto -bottom-1 bg-gray-200 transition-all group-hover:bg-gray-900" style="height: 1px;"></span>
</div>
@if ($first->attributes->has('tooltip')) <span class="font-light mt-3">
</x-tooltip> {!! $first->attributes->get('title') !!}
</span>
@if ($first->attributes->has('href'))
</a>
@endif
@endif @endif
</div> </div>
@ -59,28 +89,43 @@
@elseif (! empty($second)) @elseif (! empty($second))
<div class="w-1/2 sm:w-1/3 text-center"> <div class="w-1/2 sm:w-1/3 text-center">
@if ($second->attributes->has('tooltip')) @if ($second->attributes->has('tooltip'))
<x-tooltip id="tooltip-summary-second" placement="top" message="{!! $second->attributes->get('tooltip') !!}"> <x-tooltip id="tooltip-summary-second" placement="top" message="{!! $second->attributes->get('tooltip') !!}">
@endif
@if ($second->attributes->has('href')) @if ($second->attributes->has('href'))
<a href="{{ $second->attributes->get('href') }}" class="group"> <a href="{{ $second->attributes->get('href') }}" class="group">
@endif @endif
@php $text_color = $second->attributes->has('text-color') ? $second->attributes->get('text-color') : 'text-purple group-hover:text-purple-700'; @endphp @php $text_color = $second->attributes->has('text-color') ? $second->attributes->get('text-color') : 'text-purple group-hover:text-purple-700'; @endphp
<div @class(['relative text-xl sm:text-6xl', $text_color, 'mb-2', $second->attributes->get('class')])> <div @class(['relative text-xl sm:text-6xl', $text_color, 'mb-2', $second->attributes->get('class')])>
{!! $second->attributes->get('amount') !!} {!! $second->attributes->get('amount') !!}
<span class="w-8 absolute left-0 right-0 m-auto -bottom-1 bg-gray-200 transition-all group-hover:bg-gray-900" style="height: 1px;"></span> <span class="w-8 absolute left-0 right-0 m-auto -bottom-1 bg-gray-200 transition-all group-hover:bg-gray-900" style="height: 1px;"></span>
</div> </div>
<span class="font-light mt-3"> <span class="font-light mt-3">
{!! $second->attributes->get('title') !!} {!! $second->attributes->get('title') !!}
</span> </span>
@if ($second->attributes->has('href')) @if ($second->attributes->has('href'))
</a> </a>
@endif @endif
@if ($second->attributes->has('tooltip')) </x-tooltip>
</x-tooltip> @else
@if ($second->attributes->has('href'))
<a href="{{ $second->attributes->get('href') }}" class="group">
@endif
@php $text_color = $second->attributes->has('text-color') ? $second->attributes->get('text-color') : 'text-purple group-hover:text-purple-700'; @endphp
<div @class(['relative text-xl sm:text-6xl', $text_color, 'mb-2', $second->attributes->get('class')])>
{!! $second->attributes->get('amount') !!}
<span class="w-8 absolute left-0 right-0 m-auto -bottom-1 bg-gray-200 transition-all group-hover:bg-gray-900" style="height: 1px;"></span>
</div>
<span class="font-light mt-3">
{!! $second->attributes->get('title') !!}
</span>
@if ($second->attributes->has('href'))
</a>
@endif
@endif @endif
</div> </div>
@ -96,27 +141,41 @@
@elseif (! empty($third)) @elseif (! empty($third))
<div class="w-1/2 sm:w-1/3 text-center"> <div class="w-1/2 sm:w-1/3 text-center">
@if ($third->attributes->has('tooltip')) @if ($third->attributes->has('tooltip'))
<x-tooltip id="tooltip-summary-third" placement="top" message="{!! $third->attributes->get('tooltip') !!}"> <x-tooltip id="tooltip-summary-third" placement="top" message="{!! $third->attributes->get('tooltip') !!}">
@endif
@if ($third->attributes->has('href')) @if ($third->attributes->has('href'))
<a href="{{ $third->attributes->get('href') }}" class="group"> <a href="{{ $third->attributes->get('href') }}" class="group">
@endif @endif
@php $text_color = $third->attributes->has('text-color') ? $third->attributes->get('text-color') : 'text-purple group-hover:text-purple-700'; @endphp @php $text_color = $third->attributes->has('text-color') ? $third->attributes->get('text-color') : 'text-purple group-hover:text-purple-700'; @endphp
<div @class(['relative text-xl sm:text-6xl', $text_color, 'mb-2', $third->attributes->get('class')])> <div @class(['relative text-xl sm:text-6xl', $text_color, 'mb-2', $third->attributes->get('class')])>
{!! $third->attributes->get('amount') !!} {!! $third->attributes->get('amount') !!}
<span class="w-8 absolute left-0 right-0 m-auto -bottom-1 bg-gray-200 transition-all group-hover:bg-gray-900" style="height: 1px;"></span> <span class="w-8 absolute left-0 right-0 m-auto -bottom-1 bg-gray-200 transition-all group-hover:bg-gray-900" style="height: 1px;"></span>
</div> </div>
<span class="font-light mt-3"> <span class="font-light mt-3">
{!! $third->attributes->get('title') !!} {!! $third->attributes->get('title') !!}
</span> </span>
@if ($third->attributes->has('href')) @if ($third->attributes->has('href'))
</a> </a>
@endif @endif
@if ($third->attributes->has('tooltip')) </x-tooltip>
</x-tooltip> @else
@if ($third->attributes->has('href'))
<a href="{{ $third->attributes->get('href') }}" class="group">
@endif
@php $text_color = $third->attributes->has('text-color') ? $third->attributes->get('text-color') : 'text-purple group-hover:text-purple-700'; @endphp
<div @class(['relative text-xl sm:text-6xl', $text_color, 'mb-2', $third->attributes->get('class')])>
{!! $third->attributes->get('amount') !!}
<span class="w-8 absolute left-0 right-0 m-auto -bottom-1 bg-gray-200 transition-all group-hover:bg-gray-900" style="height: 1px;"></span>
</div>
<span class="font-light mt-3">
{!! $third->attributes->get('title') !!}
</span>
@if ($third->attributes->has('href'))
</a>
@endif
@endif @endif
</div> </div>
@endif @endif

View File

@ -4,17 +4,33 @@
@elseif (! empty($items)) @elseif (! empty($items))
@foreach ($items as $item) @foreach ($items as $item)
<div @class(['w-1/2 sm:w-1/3 text-center'])> <div @class(['w-1/2 sm:w-1/3 text-center'])>
<a href="{{ $item['href'] }}" class="group"> @if (! empty($item['tooltip']))
@php $text_color = (! empty($item['text_color'])) ? $item['text_color'] : 'text-purple group-hover:text-purple-700'; @endphp <x-tooltip id="tooltip-summary-first" placement="top" message="{!! $first->attributes->get('tooltip') !!}">
<div @class(['relative text-xl sm:text-6xl', $text_color, 'mb-2'])> <a href="{{ $item['href'] }}" class="group">
{!! $item['amount'] !!} @php $text_color = (! empty($item['text_color'])) ? $item['text_color'] : 'text-purple group-hover:text-purple-700'; @endphp
<span class="w-8 absolute left-0 right-0 m-auto -bottom-1 bg-gray-200 transition-all group-hover:bg-gray-900" style="height: 1px;"></span> <div @class(['relative text-xl sm:text-6xl', $text_color, 'mb-2'])>
</div> {!! $item['amount'] !!}
<span class="w-8 absolute left-0 right-0 m-auto -bottom-1 bg-gray-200 transition-all group-hover:bg-gray-900" style="height: 1px;"></span>
</div>
<span class="font-light mt-3"> <span class="font-light mt-3">
{!! $item['title'] !!} {!! $item['title'] !!}
</span> </span>
</a> </a>
</x-tooltip>
@else
<a href="{{ $item['href'] }}" class="group">
@php $text_color = (! empty($item['text_color'])) ? $item['text_color'] : 'text-purple group-hover:text-purple-700'; @endphp
<div @class(['relative text-xl sm:text-6xl', $text_color, 'mb-2'])>
{!! $item['amount'] !!}
<span class="w-8 absolute left-0 right-0 m-auto -bottom-1 bg-gray-200 transition-all group-hover:bg-gray-900" style="height: 1px;"></span>
</div>
<span class="font-light mt-3">
{!! $item['title'] !!}
</span>
</a>
@endif
</div> </div>
@endforeach @endforeach
@else @else
@ -23,27 +39,41 @@
@elseif (! empty($first)) @elseif (! empty($first))
<div class="w-1/2 sm:w-1/3 text-center"> <div class="w-1/2 sm:w-1/3 text-center">
@if ($first->attributes->has('tooltip')) @if ($first->attributes->has('tooltip'))
<x-tooltip id="tooltip-summary-first" placement="top" message="{!! $first->attributes->get('tooltip') !!}"> <x-tooltip id="tooltip-summary-first" placement="top" message="{!! $first->attributes->get('tooltip') !!}">
@endif
@if ($first->attributes->has('href')) @if ($first->attributes->has('href'))
<a href="{{ $first->attributes->get('hef') }}" class="group"> <a href="{{ $first->attributes->get('hef') }}" class="group">
@endif @endif
@php $text_color = $first->attributes->has('text-color') ? $first->attributes->get('text-color') : 'text-purple group-hover:text-purple-700'; @endphp @php $text_color = $first->attributes->has('text-color') ? $first->attributes->get('text-color') : 'text-purple group-hover:text-purple-700'; @endphp
<div @class(['relative text-xl sm:text-6xl', $text_color, 'mb-2'])> <div @class(['relative text-xl sm:text-6xl', $text_color, 'mb-2'])>
{!! $first->attributes->get('amount') !!} {!! $first->attributes->get('amount') !!}
<span class="w-8 absolute left-0 right-0 m-auto -bottom-1 bg-gray-200 transition-all group-hover:bg-gray-900" style="height: 1px;"></span> <span class="w-8 absolute left-0 right-0 m-auto -bottom-1 bg-gray-200 transition-all group-hover:bg-gray-900" style="height: 1px;"></span>
</div> </div>
<span class="font-light mt-3"> <span class="font-light mt-3">
{!! $first->attributes->get('title') !!} {!! $first->attributes->get('title') !!}
</span> </span>
@if ($first->attributes->has('href')) @if ($first->attributes->has('href'))
</a> </a>
@endif @endif
@if ($first->attributes->has('tooltip')) </x-tooltip>
</x-tooltip> @else
@if ($first->attributes->has('href'))
<a href="{{ $first->attributes->get('hef') }}" class="group">
@endif
@php $text_color = $first->attributes->has('text-color') ? $first->attributes->get('text-color') : 'text-purple group-hover:text-purple-700'; @endphp
<div @class(['relative text-xl sm:text-6xl', $text_color, 'mb-2'])>
{!! $first->attributes->get('amount') !!}
<span class="w-8 absolute left-0 right-0 m-auto -bottom-1 bg-gray-200 transition-all group-hover:bg-gray-900" style="height: 1px;"></span>
</div>
<span class="font-light mt-3">
{!! $first->attributes->get('title') !!}
</span>
@if ($first->attributes->has('href'))
</a>
@endif
@endif @endif
</div> </div>
@ -59,28 +89,41 @@
@elseif (! empty($second)) @elseif (! empty($second))
<div class="w-1/2 sm:w-1/3 text-center"> <div class="w-1/2 sm:w-1/3 text-center">
@if ($second->attributes->has('tooltip')) @if ($second->attributes->has('tooltip'))
<x-tooltip id="tooltip-summary-second" placement="top" message="{!! $second->attributes->get('tooltip') !!}"> <x-tooltip id="tooltip-summary-second" placement="top" message="{!! $second->attributes->get('tooltip') !!}">
@endif
@if ($second->attributes->has('href')) @if ($second->attributes->has('href'))
<a href="{{ $second->attributes->get('hef') }}" class="group"> <a href="{{ $second->attributes->get('hef') }}" class="group">
@endif @endif
@php $text_color = $second->attributes->has('text-color') ? $second->attributes->get('text-color') : 'text-purple group-hover:text-purple-700'; @endphp @php $text_color = $second->attributes->has('text-color') ? $second->attributes->get('text-color') : 'text-purple group-hover:text-purple-700'; @endphp
<div @class(['relative text-xl sm:text-6xl', $text_color, 'mb-2'])> <div @class(['relative text-xl sm:text-6xl', $text_color, 'mb-2'])>
{!! $second->attributes->get('amount') !!} {!! $second->attributes->get('amount') !!}
<span class="w-8 absolute left-0 right-0 m-auto -bottom-1 bg-gray-200 transition-all group-hover:bg-gray-900" style="height: 1px;"></span> <span class="w-8 absolute left-0 right-0 m-auto -bottom-1 bg-gray-200 transition-all group-hover:bg-gray-900" style="height: 1px;"></span>
</div> </div>
<span class="font-light mt-3"> <span class="font-light mt-3">
{!! $second->attributes->get('title') !!} {!! $second->attributes->get('title') !!}
</span> </span>
@if ($second->attributes->has('href'))
@if ($second->attributes->has('href')) </a>
</a> @endif
@endif
@if ($second->attributes->has('tooltip')) </x-tooltip>
</x-tooltip> @else
@if ($second->attributes->has('href'))
<a href="{{ $second->attributes->get('hef') }}" class="group">
@endif
@php $text_color = $second->attributes->has('text-color') ? $second->attributes->get('text-color') : 'text-purple group-hover:text-purple-700'; @endphp
<div @class(['relative text-xl sm:text-6xl', $text_color, 'mb-2'])>
{!! $second->attributes->get('amount') !!}
<span class="w-8 absolute left-0 right-0 m-auto -bottom-1 bg-gray-200 transition-all group-hover:bg-gray-900" style="height: 1px;"></span>
</div>
<span class="font-light mt-3">
{!! $second->attributes->get('title') !!}
</span>
@if ($second->attributes->has('href'))
</a>
@endif
@endif @endif
</div> </div>
@ -96,29 +139,41 @@
@elseif (! empty($third)) @elseif (! empty($third))
<div class="w-1/2 sm:w-1/3 text-center"> <div class="w-1/2 sm:w-1/3 text-center">
@if ($third->attributes->has('tooltip')) @if ($third->attributes->has('tooltip'))
<x-tooltip id="tooltip-summary-third" placement="top" message="{!! $third->attributes->get('tooltip') !!}"> <x-tooltip id="tooltip-summary-third" placement="top" message="{!! $third->attributes->get('tooltip') !!}">
@endif @if ($third->attributes->has('href'))
<a href="{{ $third->attributes->get('hef') }}" class="group">
@endif
@php $text_color = $third->attributes->has('text-color') ? $third->attributes->get('text-color') : 'text-purple group-hover:text-purple-700'; @endphp
<div @class(['relative text-xl sm:text-6xl', $text_color, 'mb-2'])>
{!! $third->attributes->get('amount') !!}
<span class="w-8 absolute left-0 right-0 m-auto -bottom-1 bg-gray-200 transition-all group-hover:bg-gray-900" style="height: 1px;"></span>
</div>
@if ($third->attributes->has('href')) <span class="font-light mt-3">
<a href="{{ $third->attributes->get('hef') }}" class="group"> {!! $third->attributes->get('title') !!}
@endif </span>
@php $text_color = $third->attributes->has('text-color') ? $third->attributes->get('text-color') : 'text-purple group-hover:text-purple-700'; @endphp @if ($third->attributes->has('href'))
<div @class(['relative text-xl sm:text-6xl', $text_color, 'mb-2'])> </a>
{!! $third->attributes->get('amount') !!} @endif
<span class="w-8 absolute left-0 right-0 m-auto -bottom-1 bg-gray-200 transition-all group-hover:bg-gray-900" style="height: 1px;"></span> </x-tooltip>
</div> @else
@if ($third->attributes->has('href'))
<a href="{{ $third->attributes->get('hef') }}" class="group">
@endif
@php $text_color = $third->attributes->has('text-color') ? $third->attributes->get('text-color') : 'text-purple group-hover:text-purple-700'; @endphp
<div @class(['relative text-xl sm:text-6xl', $text_color, 'mb-2'])>
{!! $third->attributes->get('amount') !!}
<span class="w-8 absolute left-0 right-0 m-auto -bottom-1 bg-gray-200 transition-all group-hover:bg-gray-900" style="height: 1px;"></span>
</div>
<span class="font-light mt-3"> <span class="font-light mt-3">
{!! $third->attributes->get('title') !!} {!! $third->attributes->get('title') !!}
</span> </span>
@if ($third->attributes->has('href')) @if ($third->attributes->has('href'))
</a> </a>
@endif @endif
@if ($third->attributes->has('tooltip'))
</x-tooltip>
@endif @endif
</div> </div>
@endif @endif
@endif @endif
</div> </div>