Aggiungi tag <abbr> alle parole nei post

Personalizzazione Componente del tema
30

Dopo aver armeggiato per mezza giornata, sono riuscito a creare il codice utilizzando il bot Discourse AI di @Falco :muscle:
Ricevo aiuto da un bot da due settimane, sia qui su Meta (in termini di ricerca del significato della query) sia sul mio sito web con la scrittura di questo o quel codice. Ecco il codice che sono riuscito a mettere insieme per risolvere il problema sopra:

abbr[title] {
    position: absolute;
    background: transparent; /* Sfondo trasparente in stato inattivo */
    overflow: visible; /* Consente al contenuto di uscire dai confini dell'elemento */
}

@media (prefers-color-scheme: light) {
    abbr[title] {
        color: var(--primary); /* Tonalità bianca o nera per lo script? */
    }
}
abbr[title]:hover {
    background: #FF6; /* Al passaggio del mouse, lo sfondo si tinge di una vivace tonalità gialla. */
}
abbr[title]:hover:after {
    content: " " attr(title) "";
    position: absolute;
    border-radius: 3px;
    bottom: 70%; /* Modifica questo valore per controllare la discrepanza. */
    left: 0;
    width: 250px; /* Ampiezza fissa */
    height: auto; /* "Altezza regolabile" */
    padding: 2px;
    z-index: 9;
    background: #00FF00; /* Specifica la tonalità di sfondo per il commento. */
    color: #333;
    margin-bottom: 10px; /* Incorpora un margine inferiore per creare una separazione. */
}

Lo lascio qui; forse qualcuno lo troverà utile :slightly_smiling_face:

Ps. Esercita clemenza se dovessi incontrare un errore nel codice, poiché non sono inequivocabilmente un ingegnere del software di professione.

6 Mi Piace