[CSS e HTML] Tooltip "prigioniero" del contenitore

[Lu+Lu]

Salve a tutti,

innanzi tutto spero che questa sia la sezione giusta del forum per postare la mia richiesta :)

Essendo alle primissime armi cercherò di spiegare la situazione nel modo più corretto possibile e apprezzerò moltissimo qualsiasi suggerimento dettagliato che possa portare alla soluzione del problema, che è il seguente: io e una mia amica abbiamo aperto un blog su piattaforma Blogger, che utilizza un widget per visualizzare alcune immagini in successione. Avendo la necessità di visualizzare un tooltip particolare per una determinata immagine, è stato inserito del codice CSS trovato in rete e adattato alla bisogna (totalmente assente in origine) che è sì funzionante, ma che lascia il tooltip "imprigionato" nel contenitore, come si vede da questa immagine: https://app.box.com/s/szr9p5b236nsg2hd96mh

Il codice utilizzato per lo slider è il seguente:

<style type="text/css">
/* CSS TOOLTIP CODE */
/* p.photo_container{width:400px;height:300px;position:relative;margin:25px auto;} */
p.photo_container a{text-decoration:none;color: #0000FF ;cursor:pointer;font-weight:normal;}

p.photo_container a span{visibility:hidden;position:absolute;left:200px;top:70px;
background:#FCABFF;width:300px;border:1px solid #CE53F0;font-size:0.8em;padding:25px 25px;cursor:default;line-height:140%;

border-radius: 10px 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 10px 10px rgba(0, 0, 0, 0.1); -moz-box-shadow: 10px 10px rgba(0, 0, 0, 0.1);
font-family: Calibri, Tahoma, Geneva, sans-serif;
text-align: justify;}

p.photo_container a:hover span{visibility:visible;}
/* p.photo_container img{border:1px solid gray;width:400px;height:300px;} */
</style>
<!-- Featured Content Slider Started -->
<div class='fp-slider clearfix'>
<div class='fp-slides-container clearfix'>
<div class='fp-slides'>

<!-- Slide 1 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<!-- CSS TOOLTIP -->
<p class="photo_container">
<a href="www.example.com" target="_blank"><img src="www.example.com/img1.jpg" alt="Alt1"/><span>A<br>
<br>very<br>
very<br>
very<br>
long<br>
text
<br></span></a>
</p></div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='www.example.com'>Link1</a>
</h3>
<p>
Par1
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
<a class='fp-next' href='#fp-next'></a>
<a class='fp-prev' href='#fp-prev'></a>
</div>
</div>
</div>
<!-- Slide 1 Code End -->
<!-- Slide 2 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='www.example.com' target="_blank"><img title="Title2" src="www.example.com/img2.jpg"/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='www.example.com'>Link2</a>
</h3>
<p>
Par2
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
<a class='fp-next' href='#fp-next'></a>
<a class='fp-prev' href='#fp-prev'></a>
</div>
</div>
</div>
<!-- Slide 2 Code End -->
<!-- Slide 3 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='www.example.com' target="_blank"><img title="Title3" src="www.example.com/img3.jpg"/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='www.example.com'>Link3</a>
</h3>
<p>
Par3
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
<a class='fp-next' href='#fp-next'></a>
<a class='fp-prev' href='#fp-prev'></a>
</div>
</div>
</div>
<!-- Slide 3 Code End -->
<!-- Slide 4 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='www.example.com' target="_blank"><img title="Title4" src="www.example.com/img4.jpg"/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='www.example.com'>Link4</a>
</h3>
<p>
Par4
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
<a class='fp-next' href='#fp-next'></a>
<a class='fp-prev' href='#fp-prev'></a>
</div>
</div>
</div>
<!-- Slide 4 Code End -->
<!-- Slide 5 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='www.example.com' target="_blank"><img title="Title5" src="www.example.com/img5.jpg"/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='www.example.com'>Link5</a>
</h3>
<p>
Par5
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
<a class='fp-next' href='#fp-next'></a>
<a class='fp-prev' href='#fp-prev'></a>
</div>
</div>
</div>
<!-- Slide 5 Code End -->
</div>
<div class='fp-nav'>
<span class='fp-pager'/>
</span></div>
</div>
</div>
<div style='clear:both;'/>
<!-- Featured Content Slider End --></div>


mentre a questo link è disponibile quello del template del forum, che ho preferito non postare direttamente perché come potete immaginare è molto lungo: https://app.box.com/s/j7q7xw0yyv9pqlthcsjc

Cosa si potrebbe fare per visualizzare correttamente il tooltip, e cioè sia sopra l'immagine che al di fuori del contenitore?
Se fosse necessario l'URL del blog in modo che si possa constatare il problema "dal vivo" o se servissero altri dettagli, fatemi sapere e sarò lieto di fornire tutte le informazioni necessarie

Grazie mille in anticipo per l'attenzione e per l'aiuto che potrete darmi :)

[kwb]

Prova a cambiare un po' gli z-index (https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).
Il codice qua non l'ho provato, si fa prima a vedere il problema sul sito e cercare di cambiare al volo con qualche tool come firebug o cose così...

[Lu+Lu]

Ciao e grazie per la risposta :)

Ho dato un'occhiata al template del blog e ho trovato questo:

.fp-prev-next-wrap {
position: relative;
z-index: 200;


Quindi ho fatto diversi tentativi aggiungendo la stessa proprietà nel codice CSS del widget ma con un valore più alto, ad una classe per volta:

z-index: 900;


Purtroppo però, anche impostando valori molto più alti di 900, sono riuscito al massimo ad ottenere che il tooltip venga visualizzato sopra all'area della descrizione dell'immagine: https://app.box.com/s/22pbsv311b0v4h4poyza

Cos'altro potrebbe essere?

[kwb]

C'è qualche link a cui è possibile visualizzare il lavoro completo?
Sono sicuro che potendo vedere il codice completo, ci sarebbe anche qualcun'altro ad aiutare

[OoZic]

per poterti aiutare meglio (e più velocemente) ti consiglio di mettere il codice qui:
http://jsfiddle.net/

o meglio ancora postare un link della pagina reale.

[Lu+Lu]

C'è qualche link a cui è possibile visualizzare il lavoro completo?
Sono sicuro che potendo vedere il codice completo, ci sarebbe anche qualcun'altro ad aiutare

per poterti aiutare meglio (e più velocemente) ti consiglio di mettere il codice qui:
http://jsfiddle.net/

o meglio ancora postare un link della pagina reale.
Grazie a entrambi per l'interessamento :) ! Siccome il blog è ormai pubblico e fare esperimenti col codice mentre qualcuno lo sta visitando sarebbe da evitare, ne abbiamo approntato uno di test identico a quello originale: http://prove-e-riprove.blogspot.it/

Grazie ancora per l'aiuto che potrete darci ;)

[OoZic]

ho guardato ma non vedo il problema o non riesco a riprodurlo.

come si apre quel tooltip che rimane "sotto"?

[Don[ITA]]

Per far si che il tooltip venga correttamente visualizzato è sufficiente impostare il seguente css:

div.fp-slides { overflow: visible; }

[Lu+Lu]

Ciao e grazie a tutti per le risposte :)

Dopo aver fatto diversi tentativi di posizionamento del tooltip siamo arrivati alla conclusione che lasciarlo all'interno dello slider sarebbe stata la soluzione più adatta per il blog, così l'abbiamo centrato ed adattato al contenitore

Grazie ancora e buona serata :)