fix: improved tooltip

composer.json

@@ -9,6 +9,7 @@
     "license": "MIT",
     "require": {
         "php": "^8.1",
+        "andcarpi/laravel-popper": "^0.9.4",
         "anhskohbo/no-captcha": "^3.5",
         "blade-ui-kit/blade-icons": "^1.5",
         "cviebrock/eloquent-sluggable": "^10.0",

composer.lock

@@ -4,8 +4,64 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "bff25bed7714b9e4c1383d029a29c3fd",
+    "content-hash": "6bfadf87b8450cc61e25f15f00688ecd",
     "packages": [
+        {
+            "name": "andcarpi/laravel-popper",
+            "version": "0.9.4",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/andcarpi/laravel-popper.git",
+                "reference": "fd01cbc60a62acd71ff4205ae7a03820b1a9951c"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/andcarpi/laravel-popper/zipball/fd01cbc60a62acd71ff4205ae7a03820b1a9951c",
+                "reference": "fd01cbc60a62acd71ff4205ae7a03820b1a9951c",
+                "shasum": ""
+            },
+            "type": "library",
+            "extra": {
+                "laravel": {
+                    "providers": [
+                        "andcarpi\\Popper\\PopperServiceProvider"
+                    ],
+                    "aliases": {
+                        "Popper": "andcarpi\\Popper\\Facades\\Popper"
+                    }
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "andcarpi\\Popper\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Anderson Carpi",
+                    "email": "kustelac@yahoo.com.br"
+                }
+            ],
+            "description": "A Easy to use Laravel Package, that allows you to generate tooltips in your blade views.",
+            "keywords": [
+                "blade",
+                "laravel",
+                "laravel-package",
+                "popper",
+                "tippy",
+                "tooltip",
+                "view"
+            ],
+            "support": {
+                "issues": "https://github.com/andcarpi/laravel-popper/issues",
+                "source": "https://github.com/andcarpi/laravel-popper/tree/master"
+            },
+            "time": "2019-09-26T02:06:56+00:00"
+        },
         {
             "name": "anhskohbo/no-captcha",
             "version": "3.5.0",

resources/js/app.js

@@ -1,3 +1,2 @@
 import "./bootstrap";
 import "flowbite";
-

resources/views/champions/index.blade.php

@@ -48,8 +48,7 @@
 <x-navbar/>
 <x-champions.list_all :champions="$champions" :roles="$roles"/>
 <x-footer/>
-
+@include('popper::assets')
-
 </body>
 
 </html>

resources/views/components/champions/list_all.blade.php

@@ -1,7 +1,7 @@
 <?php
 /** @var App\Models\Champion $champion */
 
-/** @var App\Models\ChampionRole $roles */
+/** @var App\Models\ChampionRoles $roles */
 ?>
 <section class="max-w-screen-xl mx-auto mt-12">
     <h2
@@ -36,33 +36,28 @@
                             <span class="text-xs text-stone-300">{{ $champion->title }}</span>
                         </div>
 
-                        <div class="flex items-center justify-between mt-2">
+                        <div class="flex items-center mt-2">
                             <p class="text-gray-300 text-sm flex">
                                 @foreach($roles[$key]->roles as $lane)
                                     <span class="sr-only">{{$lane}}</span>
 
-                                    <img data-tooltip-target="tooltip-bottom-{{$lane}}"
+                                    <img
-                                         data-tooltip-placement="bottom"
+                                        {{Popper::arrow('translucent')->theme('dark')->position('bottom')->pop($lane)}}
-                                         @if($key < 8) loading="auto" @else loading="lazy"
+                                        @if($key < 8) loading="auto" @else loading="lazy"
-                                         @endif src="{{getRoleIcon($lane)}}"
+                                        @endif src="{{getRoleIcon($lane)}}"
-                                         alt="{{$lane}} Icon"
+                                        alt="{{$lane}} Icon"
-                                         class="w-7 h-7 mr-1">
+                                        class="w-7 h-7 mr-1">
                             </p>
                             @endforeach
 
-                            <div id="tooltip-bottom-{{$lane}}" role="tooltip"
+                            <div class="w-full flex justify-end items-end justify-items-end ">
-                                 class="z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white
+                                <p class="text-right text-2xl md:text-lg text-orange-300 hover:text-orange-400">
-                                 rounded-lg shadow-sm transition-opacity opacity-0 tooltip bg-stone-700">
+                                    <a href="/champion/{{$champion->slug}}"
-                                {{$lane}}
+                                       aria-label="[Detailed {{$champion->name}} info...]">
-                                <div class="tooltip-arrow" data-popper-arrow></div>
+                                        <x-iconsax-bul-arrow-right class="w-8 transition-colors"/>
+                                    </a>
+                                </p>
                             </div>
-
-                            <p class="text-right text-2xl md:text-lg text-orange-300 hover:text-orange-400">
-                                <a href="/champion/{{$champion->slug}}"
-                                   aria-label="[Detailed {{$champion->name}} info...]">
-                                    <x-iconsax-bul-arrow-right class="w-8 transition-colors"/>
-                                </a>
-                            </p>
                         </div>
                     </div>
                 </div>