Added new tooltip component

Author: Gustavinho

CHANGELOG.md

@@ -1,9 +1,10 @@
 # Changelog
-
 ## [2.4.0] - Not released
-
 ### Added
 - Inline editing component
+- New tooltip component
+## Changed
+- Added tooltips to the icon actions.
 ## [2.3.0] - 2021-06-26
 ### Added
 - Default value for filters

resources/views/components/action.blade.php

@@ -2,6 +2,8 @@
 
 @foreach ($actions as $action)
   @if ($action->renderIf($model, $this))
-    <x-lv-icon-button :icon="$action->icon" size="sm" wire:click.prevent="executeAction('{{ $action->id }}', '{{ $model->getKey() }}')" />
+    <x-lv-tooltip :tooltip="$action->title">
+      <x-lv-icon-button :icon="$action->icon" size="sm" wire:click.prevent="executeAction('{{ $action->id }}', '{{ $model->getKey() }}')" />
+    </x-lv-tooltip>
   @endif
 @endforeach

resources/views/components/actions/icon.blade.php

@@ -0,0 +1,16 @@
+@props(['tooltip' => ''])
+
+<div x-data="{ tooltip: false }" class="cursor-pointer relative z-30 inline-flex" @mousemove.away="tooltip = false">
+  <span @mousemove="tooltip = true" @mouseleave="tooltip = false">
+    {{ $slot }}
+  </span>
+
+  <div class="relative" x-cloak x-show.transition.origin.top="tooltip">
+    <div class="flex justify-center absolute top-0 z-30 w-32 p-2 -mt-3 text-sm leading-tight text-white transform -translate-x-1/2 -translate-y-full bg-gray-800 rounded-md shadow-md">
+      {{ $tooltip }}
+    </div>
+    <svg class="absolute z-30 w-6 h-6 text-gray-800 transform -translate-x-8 -translate-y-5 fill-current stroke-current" width="8" height="8">
+      <rect x="12" y="-10" width="8" height="8" transform="rotate(45)" />
+    </svg>
+  </div>
+</div>

resources/views/components/tooltip.blade.php

@@ -19,17 +19,15 @@
 
   @if (count($items))
     {{-- Content table --}}
-    <div class="overflow-x-auto">
+    <div class="overflow-x-scroll lg:overflow-x-visible">
       @include('laravel-views::components.table')
     </div>
 
   @else
-
     {{-- Empty data message --}}
     <div class="flex justify-center items-center p-4">
       <h3>{{ __('There are no items in this table') }}</h3>
     </div>
-
   @endif
 
   {{-- Paginator, loading indicator and totals --}}

resources/views/table-view/table-view.blade.php

@@ -32,6 +32,7 @@ public function components()
             'modal' => 'modal',
             'form.checkbox' => 'checkbox',
             'form.input' => 'input',
+            'tooltip' => 'tooltip'
         ];
     }