FR | EN
Installer
Documentation

Documentation - Tooltips.

Découvrez Marssel : un framework CSS intelligent, configuration minimale, conçu pour des interfaces rapides et une expérience développeur simplifiée.

Démarrage

Concepts de base

Utilitaires

Composants

Tooltips

Marssel propose un système de tooltips (infobulles) léger et personnalisable pour afficher des informations contextuelles au survol d'éléments. Les tooltips supportent plusieurs positions, thèmes et animations.

Configuration de base

Le TooltipManager est automatiquement initialisé : 

const marssel = new Marssel();
// Le TooltipManager est prêt à l'emploi

Utilisation simple

Ajoutez l'attribut data-tooltip à n'importe quel élément :

Aperçu
Documentation 
<!-- Tooltip simple -->
<button data-tooltip="Cliquez pour enregistrer">
    Enregistrer
</button>

<!-- Tooltip sur un lien -->
<a href="#" data-tooltip="En savoir plus sur cette fonctionnalité">
    Documentation
</a>

<!-- Tooltip sur une icône -->
<span class="icon-[star] icon-size-[medium]"
    data-tooltip="Information importante">
</span>

Positions disponibles

Définissez la position avec data-tooltip-position :

Aperçu 
<!-- En haut (défaut) -->
<button data-tooltip="Tooltip en haut"
        data-tooltip-position="top">
    Top
</button>

<!-- En bas -->
<button data-tooltip="Tooltip en bas"
        data-tooltip-position="bottom">
    Bottom
</button>

<!-- À gauche -->
<button data-tooltip="Tooltip à gauche"
        data-tooltip-position="left">
    Left
</button>

<!-- À droite -->
<button data-tooltip="Tooltip à droite"
        data-tooltip-position="right">
    Right
</button>

Classes personnalisées

Ajoutez vos propres styles avec data-tooltip-class :

Aperçu 
<button data-tooltip="Tooltip personnalisé"
        data-tooltip-class="bg-[red] c-[white]">
    Custom
</button>

Options combinées

Combinez plusieurs options pour des tooltips avancés :

Aperçu 
<button data-tooltip="Tooltip personnalisé avec plusieurs options"
        data-tooltip-position="bottom"
        data-tooltip-theme="light"
        data-tooltip-animation="scale"
        data-tooltip-max-width="350"
        class="bg-[2563eb] c-[ffffff] p-[12px_24px] rounded-[6px] border-[none] cursor-[pointer]">
    Complet
</button>

API JavaScript

Créez et gérez des tooltips programmatiquement : 

// Créer un tooltip
const button = document.querySelector('#my-button');
marssel.tooltipManager.createTooltip(button, 'Nouveau tooltip', {
    position: 'bottom',
    theme: 'light',
    animation: 'scale',
    maxWidth: 300
});

// Mettre à jour un tooltip existant
marssel.tooltipManager.updateTooltip(button, 'Contenu mis à jour', {
    position: 'top',
    theme: 'dark'
});

// Supprimer un tooltip
marssel.tooltipManager.removeTooltip(button);

// Afficher un tooltip manuellement
marssel.tooltipManager.showTooltip(button);

// Masquer un tooltip manuellement
marssel.tooltipManager.hideTooltip(button);

Tooltips dynamiques

Créez des tooltips à la volée : 

// Ajouter un tooltip lors d'un événement
document.querySelector('#dynamic-btn').addEventListener('click', (e) => {
    const newElement = document.createElement('span');
    newElement.textContent = 'Nouvel élément';

    marssel.tooltipManager.createTooltip(newElement, 'Tooltip dynamique', {
        position: 'right',
        theme: 'dark'
    });

    document.body.appendChild(newElement);
});

Tooltips dynamiques

Créez des tooltips à la volée : 

<!-- Le tooltip se repositionnera automatiquement s'il sort de l'écran -->
<button data-tooltip="Ce tooltip sera toujours visible, même sur mobile"
        data-tooltip-position="top"
        data-tooltip-max-width="250"
        class="pos-[fixed] top-[10px] right-[10px]">
   Coin supérieur droit
</button>

Démo interactive

Testez les tooltips en direct :

Aperçu

Positions

Thèmes

Animations

Largeurs personnalisées

Cas d'usage

Avatar 
<div class="tooltip-demo---[max-w-[800px]+mx-[auto]+p-[24px]+bg-[f8f9fa]+rounded-[8px]]">
    <!-- Positions -->
    <div class="mb-[24px]">
        <h4 class="h4-tooltip---mb-[12px]+font-weight-[600]">Positions</h4>
        <div class="wrapper-tooltip---[d-[flex]+gap-[12px]+flex-flow-[wrap]+justify-[center]]">
            <button data-tooltip="Tooltip en haut"
                    data-tooltip-position="top"
                    class="tooltip1---bg-[6366f1]+c-[ffffff]+p-[10px_20px]+rounded-[6px]+border-[none]+cursor-[pointer] tooltip1---[bg-[4f46e5]]:hover">
                Top
            </button>
            <button data-tooltip="Tooltip en bas"
                    data-tooltip-position="bottom"
                    class="tooltip1">
                Bottom
            </button>
            <button data-tooltip="Tooltip à gauche"
                    data-tooltip-position="left"
                    class="tooltip1">
                Left
            </button>
            <button data-tooltip="Tooltip à droite"
                    data-tooltip-position="right"
                    class="tooltip1">
                Right
            </button>
        </div>
    </div>

    <!-- Thèmes -->
    <div class="mb-[24px]">
        <h4 class="h4-tooltip">Thèmes</h4>
        <div class="wrapper-tooltip">
            <button data-tooltip="Thème sombre par défaut"
                    data-tooltip-theme="dark"
                    class="tootlip-dark---[bg-[1f2937]+c-[ffffff]+p-[10px_20px]+rounded-[6px]+border-[none]+cursor-[pointer]] tooltip-dark---[bg-[111827]]:hover">
                Dark
            </button>
            <button data-tooltip="Thème clair avec bordure"
                    data-tooltip-theme="light"
                    class="tootlip-light---[bg-[f3f4f6]+c-[1f2937]+p-[10px_20px]+rounded-[6px]+border-[1px_solid_e5e7eb]+cursor-[pointer]] tooltip-light---[bg-[e5e7eb]]:hover">
                Light
            </button>
        </div>
    </div>

    <!-- Animations -->
    <div class="mb-[24px]">
        <h4 class="h4-tooltip">Animations</h4>
        <div class="wrapper-tooltip">
        <button data-tooltip="Animation fade"
                data-tooltip-animation="fade"
                class="tooltip-animate---[bg-[8b5cf6]+c-[ffffff]+p-[10px_20px]+rounded-[6px]+border-[none]+cursor-[pointer]] tooltip-animate---[bg-[7c3aed]]:hover">
            Fade
        </button>
        <button data-tooltip="Animation scale"
                data-tooltip-animation="scale"
                class="tooltip-animate">
            Scale
        </button>
        </div>
    </div>

    <!-- Largeurs -->
    <div class="mb-[24px]">
        <h4 class="h4-tooltip">Largeurs personnalisées</h4>
        <div class="wrapper-tooltip">
            <button data-tooltip="Court"
                    data-tooltip-max-width="100"
                    class="tootlip-width---[bg-[ec4899]+c-[ffffff]+p-[10px_20px]+rounded-[6px]+border-[none]+cursor-[pointer]] tootlip-width---[bg-[db2777]]:hover">
                    Petit (100px)
            </button>
            <button data-tooltip="Largeur moyenne pour un texte normal"
                    data-tooltip-max-width="200"
                    class="tootlip-width">
                    Moyen (200px)
            </button>
            <button data-tooltip="Ce tooltip a une largeur maximale de 400px ce qui permet d\'afficher beaucoup plus de contenu et de texte explicatif"
                    data-tooltip-max-width="400"
                    class="tootlip-width">
                    Large (400px)
            </button>
        </div>
    </div>

    <!-- Exemples pratiques -->
    <div>
        <h4 class="h4-tooltip">Cas d'usage</h4>
        <div class="wrapper-tooltip align-items-[center]">
            <span class="icon-[star] icon-size-[large] c-[0B63F3] cursor-[pointer]"
                    data-tooltip="Information complémentaire"
                    data-tooltip-position="right">
            </span>
            <span class="icon-[caret-right] icon-size-[large] c-[f59e0b] cursor-[pointer]"
                    data-tooltip="Besoin d'aide ?"
                    data-tooltip-position="top"
                    data-tooltip-theme="light">
            </span>
            <span class="icon-[calendar-solid] icon-size-[large] c-[D41212] cursor-[pointer]"
                    data-tooltip="Attention : action irréversible"
                    data-tooltip-position="bottom"
                    data-tooltip-max-width="200">
            </span>
            <img src="https://placehold.co/40x40""
                alt="Avatar"
                class="w-[40px] h-[40px] rounded-[50%] cursor-[pointer]"
                data-tooltip="John Doe - Développeur"
                data-tooltip-position="right">
        </div>
    </div>

</div>

Variables CSS personnalisables

Personnalisez globalement les tooltips avec des variables CSS : 

:root {
  --tooltip-z-index: 1000;
  --tooltip-max-width: 300px;
  --tooltip-offset: 8px;
}
← Précédent Toasts
Suivant → Scrollspy

Réglages des cookies

Choisissez les données que vous souhaitez partager.

🙏 Les analytics nous aident à prioriser les bonnes fonctionnalités — données en Suisse, jamais revendues.

Essentiels Requis

Nécessaires au fonctionnement (session, sécurité).