1 reply [Last post]
Lu_plus_Lu
Lu_plus_Lu's picture
Offline
newbie
Last seen: 7 years 40 weeks ago
Timezone: GMT+1
Joined: 2014-01-10
Posts: 3
Points: 5

Hi guys

In the first place I hope this is the right place for posting my request!iPls be patient, I'm from Italy, so my English is imperfect... therefore I hope to explain the situation in the most correct way. Moreover, please consider I'm a beginner. Because of this reason every detailed suggestion will be truly appreciated ^-^

Problem: I and a friend of mine opened a blog using Blogger. We "adopted" the code from a widget by creating our own, but probably we made a few mistakes! BTW, the widget allows to show in the correct way a few pictures one after the other.
Well, we had the idea to add a specific tooltip for one image, and we adopted and adapted more than one code for creating our own!
We added a CSS code (totally new, originally not present). It is partially working: the tooltip opens, but only into the widget, as you can see in the picture at the following link https://app.box.com/s/szr9p5b236nsg2hd96mh

The code used for the slider is here:

<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>

In case you need the code of the forum template, please be so kind to download it by copying/pasting the following link https://app.box.com/s/j7q7xw0yyv9pqlthcsjc
Thanks
(As you can easily guess, it is very long and I preferred not to post it directly on the forum)

Is it there a way -probably related to the positioning- to show in a totally correct way the tooltip, over the widget?
The URL of the blog is http://deliriassortiti.blogspot.it/
If you need other info, just let me know. I'll be glad to let you know all requested/necessary details

Thank you very much in advance Smile

Lu_plus_Lu
Lu_plus_Lu's picture
Offline
newbie
Last seen: 7 years 40 weeks ago
Timezone: GMT+1
Joined: 2014-01-10
Posts: 3
Points: 5

Quote: The URL of the blog is

Quote:

The URL of the blog is http://www.deliriassortiti.blogspot.it/
If you need other info, just let me know. I'll be glad to let you know all requested/necessary details

Thank you very much in advance Smile

Hi all

We created a new blog without posts, just only the slider where we'd like to see the tooltip finally correctly working!
The new link is the following one: http://www.prove-e-riprove.blogspot.it

Many thanks in advance to everyone who will read/give suggestions