Annotazioni su testo, possibili soluzioni

[gbvitrano]

Nell'attesa del Maestro credo di aver trovato due soluzioni semplici, nella prima soluzione ho usato un plugin MkDocs Tooltips il manuale è fatto con Material for MkDocs :-), una parte del css l'ho modificato per l'uso in stile annotazione di Matirial.

La seconda soluzione è realizzata con html e css sempre modificato per l'uso in stile annotazione di Matirial.

qui la pagina test

css modificato esempio plugin MkDocs Tooltips hint.min.css

css modificato esempio html tt.css

[UO-TransizioneDigitaleComunePalermo]

mucho interessante, complimenti per la ricerca @gbvitrano ....
per ora studio.

Mi piacerebbe (come code annotation fa) cliccare sul numeretto e il popup resta finchè non clicco di nuovo e poi si chiude, questo per una maggiore leggibilità da parte di chi chi non è molto smanettone e u mouse ci sgridda in continuazione nel monitor ...

Ho notato che sul file mkdocs.yml non hai messo il nome file dei due file css (hint.min.css) e (tt.css)

come mai funziona lo stesso?

[cirospat]

con la soluzione del plugin tooltip immagino che:

scrivo testo e poi quando devo scrivere l'annotazione sulla parola ciro spataro [1] allora a fine testo - e lasciando una riga vuota - scriverò quello che vedi di seguito.

*[1]{Resta di stucco, è un barbatrucco... 😂 Resta di stucco, è un barbatrucco ...Resta di stucco, è un barbatrucco ...Resta di stucco, è un barbatrucco...|right|rounded|large}

---

cioè quello che voglio dire è che non dovrei scrivere il contenuto dell'annotation nello stesso testo, perchè si incasinerebbe la lettura del testo.
In pratica quello che vedo come buona prassi è seguire la stessa procedura delle code annotation con contenuto dell'annotation scritta in basso sotto il testo.

Vedo che nel tuo file .md il contenuto dell'annotation è nello stesso testo e lo trovo incasinante:

[gbvitrano]

Bungiorno...
in quale file mkdocs.yml hai guardato...? :-) cmq anche nel mio file mkdocs.yml non vi è traccia dei due file css perché il carico con il comando @import nel file gbextra.css

il plugin va installato, gh-deploy.yml

nel file mkdocs.yml va aggiunto

plugins:
  - tooltips

[gbvitrano]

Per quanto riguarda la funzionalità, anche a me piacerebbe avere l'evento al click del mouse, ma non sono riuscito a farlo funzionare bene in quel modo, al click spariva il background-color del tooltips, e quindi initilizzabile.

Per quanto riguarda la formattazione, si è vero bisogna stare attenti con il testo/codice ma il plugin o il codice html sono provvisori ed adattati a fare un lavoro diverso da quello normale.

Per semplificare l'immissione del codice si potrebbero usare i commenti di Markdown, da provare, non ho idea se si riesce a formattare il tooltips

passa il mouse qui

[gbvitrano]

Con l'html si può attivare/disattivare il tooltip al click del mouse, sempre usando un barbatrucco :-)
ma il codice si complica un pochino... :-) sempre meglio di niente :-) :-)

<label class="tooltip">4<input type="checkbox"><span>Resta di stucco, è un barbatrucco... 😂  Resta di stucco, è un barbatrucco...
Resta di stucco, è un barbatrucco ...Resta di stucco, è un barbatrucco ...</span></label>

Usando il codice html e il relativo css non occorre installare la plugin MkDocs Tooltips

test