🏷 TLD - tld_tooltip - Composant de Tooltip

📖 Introduction

tld_tooltip est un Web Component léger et réutilisable permettant d’afficher une info-bulle contextuelle au survol d’une icône. Il est conçu pour s’intégrer facilement dans une interface existante, sans dépendance à un framework front-end.

Le composant prend en charge :

• plusieurs orientations d’affichage (top, bottom, left, right),
• une animation fluide lors de l’apparition,
• une personnalisation complète via CSS,
• une intégration simple basée sur le contenu HTML natif.

Il s’inscrit dans la logique du projet TLD (The Library Dev) et repose sur l’infrastructure commune des Web Components personnalisés.

📦 Installation / Prérequis / Dépendances

tld_tooltip repose sur les dépendances suivantes :

Dépendances internes

• tld_custom_elements Classe de base commune aux Web Components TLD, responsable :

📄 Proprietes

Type

private _type: string;

Définit l’orientation de la bulle par rapport à l’icône. Valeurs supportées :

• top
• bottom (valeur par défaut)
• left
• right

Src

private _src: any;

Contient la source de l’icône affichée à l’écran (src de la balise <img>).

⚙️ Methodes

Constructor

constructor( Attributes : {[name:string] : any} | null = null) {}

Attributes est nécessaire pour le parent tld_custom_elements, il contient tous les attributs du web composant. Il initialise également les valeurs par défaut du composant.

constructor( Attributes : {[name:string] : any} | null = null) {
    super(Attributes)
    this._type = "bottom";
}

Render

render() {}

La méthode render() construit dynamiquement la structure DOM du tooltip :

• création de l’icône (<img>),
• création du conteneur du tooltip,
• déplacement du contenu HTML interne dans la bulle,
• insertion finale dans le composant.

render() {

    const icon = document.createElement("img")
    icon.src= this._src

    const tooltip_conteneur = document.createElement("div")
    tooltip_conteneur.classList.add("tooltip_conteneur" , this._type)

    const tooltip_conteneur_message = document.createElement("div")
    tooltip_conteneur_message.classList.add("tooltip_conteneur_message")
    tooltip_conteneur.appendChild(tooltip_conteneur_message)

    const div = document.createElement("div")
    this._MouveAllElement(this,div)
    tooltip_conteneur_message.appendChild(div)

    this.appendChild(icon)
    this.appendChild(tooltip_conteneur)

}

🏷️ Attributs HTML

Attributes	Description
src	URL de l’icône
type	Orientation de la bulle (top, bottom, left, right)

🚀 Utilisation

Exemple simple d’utilisation dans le HTML :

<tld-tooltip src="/img/icon/info.svg">
    Ceci est une info-bulle.
</tld-tooltip>

Le contenu interne du composant est automatiquement injecté dans la bulle.

Stylisation (CSS)

Le composant ne repose pas sur le Shadow DOM, ce qui permet une personnalisation CSS complète depuis l’extérieur.

🎯 Conclusion

tld_tooltip est un Web Component simple, flexible et orienté usage réel. Il permet d’ajouter rapidement des info-bulles élégantes, sans dépendance externe et avec une grande liberté de personnalisation.

Il s’intègre naturellement dans une architecture basée sur :

des Web Components personnalisés,

une gestion CSS globale,

des composants légers et explicite

📜 Code

src/wc/tld_tooltip/index.ts

import { tld_custom_elements } from "../tld_custom_elements";

export class tld_tooltip extends tld_custom_elements {
    private _type: string;
    private _src: any;
    
    constructor( Attributes : {[name:string] : any} | null = null) {
        super(Attributes)
        this._type = "bottom";
    }

    render() {

        const icon = document.createElement("img")
        icon.src= this._src

        const tooltip_conteneur = document.createElement("div")
        tooltip_conteneur.classList.add("tooltip_conteneur" , this._type)

        const tooltip_conteneur_message = document.createElement("div")
        tooltip_conteneur_message.classList.add("tooltip_conteneur_message")
        tooltip_conteneur.appendChild(tooltip_conteneur_message)

        const div = document.createElement("div")
        this._MouveAllElement(this,div)
        tooltip_conteneur_message.appendChild(div)

        this.appendChild(icon)
        this.appendChild(tooltip_conteneur)

    }


    static get observedAttributes() { return ["src" ,"type"] ;}

}

src/wc/tld_tooltip/index.css

tld-tooltip {
    display: inline-block;
    position: relative;
}

tld-tooltip > img {
    width: 15px;
    height: 15px;
    cursor: pointer;

}

tld-tooltip > .tooltip_conteneur {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50% ,-50%);
    width: 0px;
    height: 0px;
    z-index: 1;    
}

tld-tooltip > .tooltip_conteneur.bottom { 
    top: 100%;
}

tld-tooltip > .tooltip_conteneur.bottom .tooltip_conteneur_message { 
    transform: translate(-50% ,0);
}

tld-tooltip > .tooltip_conteneur.top { 
    top: -5px;
}

tld-tooltip > .tooltip_conteneur.top .tooltip_conteneur_message { 
    transform: translate(-50% , calc(-100% - 10px));
}

tld-tooltip > img:hover +  div .tooltip_conteneur_message {

    display: block;
    animation: 0.5s tld-tooltip ;
    opacity: 1;
    
}


tld-tooltip > .tooltip_conteneur.right { 
    left: 100%;
}

tld-tooltip > .tooltip_conteneur.right .tooltip_conteneur_message { 
    transform: translate(0 ,-50%);
}

tld-tooltip > .tooltip_conteneur.left { 
    left: -5px;
}

tld-tooltip > .tooltip_conteneur.left .tooltip_conteneur_message { 
    transform: translate(calc(-100% - 10px) , -50%);
}

tld-tooltip .tooltip_conteneur_message {
    margin: 5px;
    padding: 5px;
    box-sizing: border-box;
    border: 1px solid var(--gray-300);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-md);
    background-color: var(--gray-50);
    width :max-content;
    height :max-content;
    min-height: 30px;
    max-width: 300px;
    display: none;

    
}

@keyframes tld-tooltip {
    0% { opacity: 0;}
    100% {  opacity: 1;}
}