#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2014
    Posts
    2
    Rep Power
    0

    Arrow [New User] How to fix an uncorrect (maybe related to positioning) tooltip behavior?


    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:
    Code:
    <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://prove-e-riprove.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
    Last edited by Lu+Lu; January 13th, 2014 at 09:41 AM. Reason: Make links more visible ^-^

IMN logo majestic logo threadwatch logo seochat tools logo