FR | EN
Install
Documentation

Documentation - Tooltips.

Discover Marssel: an intelligent, minimal configuration CSS framework designed for fast interfaces and a simplified developer experience.

Startup

Basic concepts

Utilities

Components

Tooltips

Marssel offers a lightweight and customizable tooltip system to display contextual information when hovering over elements. Tooltips support multiple positions, themes and animations.

Basic setup

The TooltipManager is automatically initialized: 

const marssel = new Marssel();
// The TooltipManager is ready to use

Simple use

Add the data-tooltip attribute to any element:

Preview
Documentation 
<!-- Simple Tooltip -->
<button data-tooltip="Click to save">
    Save
</button>

<!-- Tooltip on a link -->
<a href="#" data-tooltip="Learn more about this feature">
    Documentation
</a>

<!-- Tooltip on an icon -->
<span class="icon-[star] icon-size-[medium]"
    data-tooltip="Important information">
</span>

Positions available

Set the position with data-tooltip-position:

Preview 
<!-- Top (default) -->
<button data-tooltip="Tooltip on top"
        data-tooltip-position="top">
    Top
</button>

<!-- Down -->
<button data-tooltip="Tooltip at the bottom"
        data-tooltip-position="bottom">
    Bottom
</button>

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

<!-- Right -->
<button data-tooltip="Tooltip on the right"
        data-tooltip-position="right">
    Right
</button>

Custom Classes

Add your own styles with data-tooltip-class:

Preview 
<button data-tooltip="Custom Tooltip"
        data-tooltip-class="bg-[red] c-[white]">
    Custom
</button>

Combined options

Combine multiple options for advanced tooltips:

Preview 
<button data-tooltip="Custom tooltip with multiple 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]">
    Complete
</button>

JavaScript API

Create and manage tooltips programmatically: 

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

// Update an existing tooltip
marssel.tooltipManager.updateTooltip(button, 'Contenu mis à jour', {
    position: 'top',
    theme: 'dark'
});

// Delete a tooltip
marssel.tooltipManager.removeTooltip(button);

// Display a tooltip manually
marssel.tooltipManager.showTooltip(button);

// Hide a tooltip manually
marssel.tooltipManager.hideTooltip(button);

Dynamic Tooltips

Create tooltips on the fly: 

// Add a tooltip during an event
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);
});

Dynamic Tooltips

Create tooltips on the fly: 

<!-- The tooltip will automatically reposition itself if it leaves the screen -->
<button data-tooltip="This tooltip will always be visible, even on mobile"
        data-tooltip-position="top"
        data-tooltip-max-width="250"
        class="pos-[fixed] top-[10px] right-[10px]">
   Upper right corner
</button>

Interactive demo

Test the tooltips live:

Preview

Positions

Themes

Entertainment

Custom widths

Use cases

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 on top"
                    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 at the bottom"
                    data-tooltip-position="bottom"
                    class="tooltip1">
                Bottom
            </button>
            <button data-tooltip="Tooltip left"
                    data-tooltip-position="left"
                    class="tooltip1">
                Left
            </button>
            <button data-tooltip="Tooltip on the right"
                    data-tooltip-position="right"
                    class="tooltip1">
                Right
            </button>
        </div>
    </div>

    <!-- Themes -->
    <div class="mb-[24px]">
        <h4 class="h4-tooltip">Themes</h4>
        <div class="wrapper-tooltip">
            <button data-tooltip="Default dark theme"
                    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="Light theme with border"
                    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>

    <!-- Entertainment -->
    <div class="mb-[24px]">
        <h4 class="h4-tooltip">Entertainment</h4>
        <div class="wrapper-tooltip">
        <button data-tooltip="Bland animation"
                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>

    <!-- Widths -->
    <div class="mb-[24px]">
        <h4 class="h4-tooltip">Custom widths</h4>
        <div class="wrapper-tooltip">
            <button data-tooltip="Short"
                    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">
                    Small (100px)
            </button>
            <button data-tooltip="Average width for normal text"
                    data-tooltip-max-width="200"
                    class="tootlip-width">
                    Medium (200px)
            </button>
            <button data-tooltip="This tooltip has a maximum width of 400px which allows you to display much more content and explanatory text"
                    data-tooltip-max-width="400"
                    class="tootlip-width">
                    Large (400px)
            </button>
        </div>
    </div>

    <!-- Practical examples -->
    <div>
        <h4 class="h4-tooltip">Use cases</h4>
        <div class="wrapper-tooltip align-items-[center]">
            <span class="icon-[star] icon-size-[large] c-[0B63F3] cursor-[pointer]"
                    data-tooltip="Additional information"
                    data-tooltip-position="right">
            </span>
            <span class="icon-[caret-right] icon-size-[large] c-[f59e0b] cursor-[pointer]"
                    data-tooltip="Need help?"
                    data-tooltip-position="top"
                    data-tooltip-theme="light">
            </span>
            <span class="icon-[calendar-solid] icon-size-[large] c-[D41212] cursor-[pointer]"
                    data-tooltip="Warning: irreversible action"
                    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 - Developer"
                data-tooltip-position="right">
        </div>
    </div>

</div>

Customizable CSS variables

Globally customize tooltips with CSS variables: 

:root {
  --tooltip-z-index: 1000;
  --tooltip-max-width: 300px;
  --tooltip-offset: 8px;
}
← Previous Toasts
Next → Scrollspy

Cookie settings

Choose the data you want to share.

🙏 Analytics help us prioritize the right features — data in Switzerland, never resold.

Essentials Required

Necessary for operation (session, security).