Add <abbr> tags to words in posts

Personnalisation Composant de thème
30

Après avoir bricolé pendant une demi-journée, j’ai réussi à créer le code en utilisant le bot Discourse AI de @Falco :muscle:
Je reçois de l’aide d’un bot depuis deux semaines maintenant, que ce soit ici sur Meta (pour rechercher la signification d’une requête) ou sur mon site web pour écrire tel ou tel code. Voici le code que j’ai réussi à assembler pour résoudre le problème ci-dessus :

abbr[title] {
    position: absolute;
    background: transparent; /* Fond transparent à l'état inactif */
    overflow: visible; /* Permet au contenu de dépasser les limites de l'élément */
}

@media (prefers-color-scheme: light) {
    abbr[title] {
        color: var(--primary); /* Teinte blanche ou noire pour le script ? */
    }
}
abbr[title]:hover {
    background: #FF6; /* Au survol, l'arrière-plan baigne dans une teinte jaune vibrante. */
}
abbr[title]:hover:after {
    content: " " attr(title) "";
    position: absolute;
    border-radius: 3px;
    bottom: 70%; /* Modifiez cette valeur pour contrôler l'écart. */
    left: 0;
    width: 250px; /* Largeur fixe */
    height: auto; /*"Élévation réglable" */
    padding: 2px;
    z-index: 9;
    background: #00FF00; /* Spécifiez la teinte d'arrière-plan pour le commentaire. */
    color: #333;
    margin-bottom: 10px; /* Incorporez une marge inférieure pour créer une séparation. */
}

Je laisse cela ici ; peut-être que quelqu’un trouvera cela utile :slightly_smiling_face:

Ps. Faites preuve de clémence si vous rencontrez une erreur dans le code, car je ne suis absolument pas un ingénieur logiciel de profession.

6 « J'aime »