Tooltip incarcerato dentro timeline

[Malux]

Salve a tutti!
Come da titolo, da qualche settimana ho dovuto riprendere in mano un codice che avevo scritto mesi fa. Avevo accantonato perché non riuscivo a trovare una soluzione.

In pratica ho creato una timeline dove ad ogni anno corrisponde un evento, cliccando sull'evento si allarga il container scoprendo il contenuto nascosto. Al suo interno, per migliorarne la navigazione ho evidenziato delle parole con i tooltip inserendo come contenuti, delle integrazioni al testo di riferimento.
Succede che questi tooltip, quando si trovano all'estremo del container (a destra e in basso) questi vengono letteralmente tagliati facendo in modo di rendere poco fruibile il testo al suo interno.

Allego il link della pagina di prova che ho creato per capire meglio il problema.

In passato provai a risolvere generando una finestra modale a tutto schermo e in questa maniera risolvevo il problema del tooltip ma andava a crearsene un altro di natura estetica. Utilizzando la timeline e cliccando sull'evento non andava a generare l'animazione attuale di apertura nuvola ma compariva all'interno della nuvola il titolo sottolineato sotto forma di link. A dirla tutta non mi aggradava poi tanto...

Mi avevano consigliato di modificare overflow e max-width ma provando veniva tutto ammassato su una linea o peggio.

Qualche dritta prima di rimaneggiare totalmente il codice? :P

[KillerWorm]

Ciao e benvenuto.

Qualche dritta prima di rimaneggiare totalmente il codice? :P

A prescindere dal tooltip e anche se non rifai tutto da zero, ci sono diversi errori nel codice html che andrebbero comunque corretti.
https://validator.w3.org/nu/?doc=htt...016-05-19.html

Succede che questi tooltip, quando si trovano all'estremo del container (a destra e in basso) questi vengono letteralmente tagliati facendo in modo di rendere poco fruibile il testo al suo interno.

Se gli elementi, per i quali deve apparire il tooltip, fossero fissi e con una posizione prestabilita, avresti potuto utilizzare diverse classi per impostare la posizione stessa del tooltip (in modo da farlo apparire a sinistra piuttosto che a destra e/o in alto piuttosto che in basso) ma, nel tuo caso (avendo dei contenuti dinamici), la questione è difficilmente risolvibile col solo CSS, dovresti utilizzare JavaScript/jQuery per calcolare i limiti del contenitore e posizionare di conseguenza il tooltip.

Nel caso, ti invito a cercare sul web qualche tooltip jQuery. Se poi hai bisogno di consigli (in riferimento a soluzioni JavaScript) o aiuto per qualche script in particolare, puoi formulare la tua richiesta sul forum JavaScript.



[Mod]
Non sposto questa discussione perché tutto sommato potrebbero esserci delle soluzioni alternative, sempre in CSS.

[VinzClortho]

teoricamente, posizionando il z-index ad un livello superiore, si potrebbe imporre il tooltip sul contenitore del testo. Sinceramente però, temo che questa cosa dei tooltip ti creerà più difficoltà che vantaggi

[Malux]

Grazie KillerWorm per la risposta.

Effettivamente guardando il validator ce ne sono di errori...


Pensavo di risolvere tutto con i CSS però mi rendo conto come hai confermato tu che è quasi impossibile...

Seguirò il tuo consiglio e cercherò qualche tooltip che possa funzionare con il contenuto dinamico.


Grazie VinzClortho per l'intervento.
Effettivamente avevo provato a "giocherellare" con lo z-index ma non sortiva nessun effetto anzi complicava la situazione, come giustamente hai fatto notare.

[VinzClortho]

intendevo in generale, che la soluzione dei tooltips ti creerà delle grane, se i testi da contenere sono lunghi come quelli che ho visto nell'esempio. Inoltre, non mi sembra una soluzione molto versatile sul piano del mobile.

[Malux]

Inoltre, non mi sembra una soluzione molto versatile sul piano del mobile.

Grazie per la risposta.
Sul piano mobile pensavo potesse andare bene. Quindi dovrei abbandonare il tooltip e realizzare, per ogni nota, una finestra modale?

[VinzClortho]

su uno schermo touch immagino di dover tenere il dito sulla scritta per leggere i tooltip, e non mi sembra molto pratico. Inoltre su di uno schermo ridotto avresti ancora più problemi nel tenere sotto controllo i balloon con testi considerevoli. Poi scegli tu cosa ti sembra meglio, magari metti in conto qualche soluzione di fallback.

[Malux]

su uno schermo touch immagino di dover tenere il dito sulla scritta per leggere i tooltip, e non mi sembra molto pratico.

Grazie mille per la dritta. Non avevo pensato ai problemi che potevano andarsi a creare con l'utilizzo dello schermo touch. Vediamo quello che riesco a fare!