{{-- Contextual Help Component - Shows a small help icon with detailed explanation Usage: Contenu détaillé de l'aide --}} @props([ 'title' => 'Aide', 'position' => 'top', // top, bottom, left, right 'size' => 'md', // sm, md, lg 'icon' => '?', 'color' => 'blue' // blue, green, purple, orange ]) @php $colors = [ 'blue' => 'from-blue-500 to-indigo-600', 'green' => 'from-green-500 to-emerald-600', 'purple' => 'from-purple-500 to-indigo-600', 'orange' => 'from-orange-500 to-amber-600', ]; $bgColor = $colors[$color] ?? $colors['blue']; $sizes = [ 'sm' => 'w-4 h-4 text-[10px]', 'md' => 'w-5 h-5 text-xs', 'lg' => 'w-6 h-6 text-sm', ]; $sizeClass = $sizes[$size] ?? $sizes['md']; @endphp {{-- Help trigger --}} {{ $icon }} {{-- Tooltip content --}}
$position === 'top', 'top-full mt-2' => $position === 'bottom', 'right-full mr-2' => $position === 'left', 'left-full ml-2' => $position === 'right', ]) style="min-width: 200px;"> {{-- Arrow --}}
$position === 'top', 'top-0 left-1/2 -translate-x-1/2 -translate-y-1/2' => $position === 'bottom', 'right-0 top-1/2 translate-x-1/2 -translate-y-1/2' => $position === 'left', 'left-0 top-1/2 -translate-x-1/2 -translate-y-1/2' => $position === 'right', ])>
@if($title)

💡 {{ $title }}

@endif
{{ $slot }}