{# # ============================================================================ # ATOM: TOOLTIP — version déclarative (CSS-only, sans JS) # ============================================================================ # # ⚠️ DANS 99% DES CAS, PRÉFÉRER L'ATTRIBUT GLOBAL `data-tooltip="..."` # # Le contrôleur Stimulus global `shared--tooltip` (activé sur dans # base.html.twig) gère automatiquement tous les éléments avec : # # # … # # Positions : top (défaut) | bottom | left | right # # ============================================================================ # CET ATOME EST RÉSERVÉ AUX CAS RARES # ============================================================================ # - Pages 100% SSR sans JS chargé # - Tooltips dans un email rendu serveur # - Tests fonctionnels qui ne chargent pas Stimulus # # Design identique au contrôleur global : fond blanc, ombre douce, border # subtil, font 12px medium, animation 180ms. # # ============================================================================ # PARAMÈTRES # ============================================================================ # | Paramètre | Type | Défaut | Description | # |-----------|---------|-----------|------------------------------------------| # | text | string | '' | Texte du tooltip | # | position | string | 'top' | Position: top, bottom, left, right | # | variant | string | 'light' | Style: light (défaut, sidebar-like), dark | # | size | string | 'sm' | Taille: sm, md | # | class | string | '' | Classes additionnelles | # # USAGE : # {% embed '_atoms/tooltip/tooltip.html.twig' with { text: 'Enregistrer' } %} # {% block content %}{% endblock %} # {% endembed %} #} {% set text = text ?? '' %} {% set position = position ?? 'top' %} {% set variant = variant ?? 'light' %} {% set size = size ?? 'sm' %} {% set class = class ?? '' %} {# ============================================================================ VARIANTES — light (sidebar-like) par défaut, dark optionnel ============================================================================ #} {% set variantClasses = { 'light': 'bg-white text-gray-900 border border-black/[0.07] shadow-[0_4px_16px_rgba(0,0,0,0.10),0_1px_4px_rgba(0,0,0,0.06)]', 'dark': 'bg-gray-900 text-white shadow-md' } %} {# ============================================================================ TAILLES — sm aligné sur sidebar (12px / padding 6px 12px) ============================================================================ #} {% set sizeClasses = { 'sm': 'text-[12px] font-medium px-3 py-1.5 leading-tight', 'md': 'text-sm font-medium px-3.5 py-2 leading-tight' } %} {# ============================================================================ POSITIONS ============================================================================ #} {% set positionClasses = { 'top': 'bottom-full left-1/2 -translate-x-1/2 mb-2', 'bottom': 'top-full left-1/2 -translate-x-1/2 mt-2', 'left': 'right-full top-1/2 -translate-y-1/2 mr-2', 'right': 'left-full top-1/2 -translate-y-1/2 ml-2' } %} {# Arrow color matched to variant background #} {% set arrowColors = { 'light': { top: 'border-t-white', bottom: 'border-b-white', left: 'border-l-white', right: 'border-r-white' }, 'dark': { top: 'border-t-gray-900', bottom: 'border-b-gray-900', left: 'border-l-gray-900', right: 'border-r-gray-900' } } %} {% set arrowSidesByPosition = { 'top': 'border-x-transparent border-b-transparent', 'bottom': 'border-x-transparent border-t-transparent', 'left': 'border-y-transparent border-r-transparent', 'right': 'border-y-transparent border-l-transparent' } %} {# ============================================================================ RENDU HTML ============================================================================ #}

{# Contenu (slot) #} {% block content %}{% endblock %} {# Tooltip #} {% if text %} {% endif %}