Tooltip "prigioniero" del contenitore

[lu.lu]

Tooltip "prigioniero" del contenitore

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 in questa immagine: 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="example.com" target="_blank"><img src="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='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='example.com' target="_blank"><img title="Title2" src="example.com/img2.jpg"/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='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='example.com' target="_blank"><img title="Title3" src="example.com/img3.jpg"/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='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='example.com' target="_blank"><img title="Title4" src="example.com/img4.jpg"/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='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='example.com' target="_blank"><img title="Title5" src="example.com/img5.jpg"/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='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: 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 è 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 b l o g sul quale vorremmo applicare questo codice -beninteso, una volta funzionante- è pubblico e di tanto in tanto visitato, ne abbiamo creato uno apposito, dedicato unicamente alle sole prove ^-^
Il nuovo indirizzo web è il seguente: prove-e-riprove.blogspot.it/

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