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?
L'URL del blog è http://polvere-di-fantasia.blogspot.it/; in caso 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

[Lu+Lu]

Salve, poiché il blog sul quale vorremmo applicare questo codice -beninteso, una volta funzionante- è pubblico e di tanto in tanto visitato, abbiamo creato un apposito blog dedicato alle sole prove ^-^
Il nuovo link è il seguente: http://prove-e-riprove.blogspot.it/

Grazie ancora per l'attenzione e per l'aiuto che potrete darci, e buona serata

[mahamatt]

Allora, in sostanza il problema è un abuso della proprietà "overflow:hidden".
I seguenti selettori hanno questa proprietà dichiarata (e andrebbe cambiata in overflow:visible):

• #sidebar-wrapper (riga 134)
• .fp-slider (riga 771)
• .fp-slides, .fp-thumbnail (riga 785)

Cambiare i valori di queste 3 proprietà non è sufficiente perché noto che un overflow:hidden è assegnato come stile inline a uno dei div:

 <div class="fp-slides" style="overflow: hidden;">

Probabilmente questo codice è generato dinamicamente, per cui bisognerà mettere mano alla relativa pagina del template per modificarlo.

[Lu+Lu]

Ciao e grazie per la risposta molto esauriente

Nel frattempo abbiamo fatto diversi tentativi per il posizionamento del tooltip e 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 mille ancora per l'aiuto e buona serata