Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jan 2014
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    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!
    Pls 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 following picture
    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 here : https://app.box.com/s/j7q7xw0yyv9pqlthcsjc (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

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,699
    Thanks
    0
    Thanked 233 Times in 228 Posts
    Hi there Lu+Lu,

    and a warm welcome to these forums.

    This HTML...
    Code:
    
    <!-- CSS TOOLTIP -->
    <p class="photo_container">
    
    <a href="www.example.com" target="_blank">
    
    <img src="www.example.com/img1.jpg" alt="Alt1">
    
    <span>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec 
    ultricies sollicitudin nisi, ut molestie felis adipiscing sit 
    amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae 
    faucibus felis. Vivamus at metus eget eros consequat fringilla. 
    Quisque magna magna, laoreet eu tempus sit amet, fringilla at 
    tellus. Praesent felis tortor, scelerisque vitae fringilla 
    non, porttitor et lacus. Ut ut sapien nec quam tincidunt 
    consectetur in nec lacus.
    </span>
    
    </a>
    
    </p>
    
    ...with this CSS...
    Code:
    
    <style type="text/css"> 
    /* CSS TOOLTIP CODE */
    p.photo_container {
        position:relative;
        width:400px;
        height:300px;
        margin:25px auto;
     }
    p.photo_container a {
        font-weight:normal;
        color:#00f ;
        text-decoration:none;
        cursor:pointer;
     }
    p.photo_container a span {
        visibility:hidden;
        position:absolute;
        top:50px;
        left:25px;
        width:300px;
        padding:25px;
        border:1px solid #ce53f0;
        border-radius:10px 10px; 
        font-family:calibri,tahoma,geneva,sans-serif;
        font-size:0.8em;
        text-align:justify;
        cursor:default;
        line-height:140%;
        background-color:#fcabff;
        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);
      }
    p.photo_container a:hover span {
        visibility:visible;
     }
    p.photo_container img {
        display:block;
        width:400px;
        height:300px;
        border:1px solid #808080;
     }
    </style>
    ...works OK for me.

    coothead
    Last edited by coothead; 01-13-2014 at 09:23 AM.

  • #3
    New to the CF scene
    Join Date
    Jan 2014
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Arrow Thanks for your welcome!

    Quote Originally Posted by coothead View Post
    Hi there Lu+Lu,

    and a warm welcome to these forums.

    This HTML...
    Code:
    
    <!-- CSS TOOLTIP -->
    <p class="photo_container">
    [...]
    
    ...with this CSS...
    Code:
    
    <style type="text/css"> 
    /* CSS TOOLTIP CODE */
    p.photo_container {
        position:relative;
        width:400px;
        height:300px;
        margin:25px auto;
     [...]
    ...works OK for me.

    coothead
    Hi

    Thanks for your welcome on the forums, and also for your confirmation.
    Before applying the above code to our new blog (created on Blogger platform), we tried it by creating a simple html page. It worked fine, as you can see in the following picture
    http://www.prove-e-riprove.blogspot.it

    Probably the best way to get a solution is opening the page where this issue can be reproduced, but here in Italy it's still lunch time right now!
    Meanwhile the linked "test-forum" won't be visible.
    Moreover, it's highly probable that the above link will be changed, since yesterday we were thinking about the possibility to create an effective forum for tests only instead of using the previously existing one by Luca!
    In this case, of course we will write here the new link.The new expressively created forum would be always visible, very quick to open (without any post) ^-^
    Thanks for reading my long message.
    Luana

    @ everyone: Thanks for reading and for suggesting. Pls be patients a little bit. Updated/new link will be posted as soon as possible
    Last edited by sage45; 06-10-2014 at 05:26 PM. Reason: Updated post to use new link

  • #4
    New to the CF scene
    Join Date
    Jan 2014
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question

    Quote Originally Posted by Lu+Lu View Post
    In this case, of course we will write here the new link.The new expressively created forum would be always visible, very quick to open (without any post) ^-^
    Thanks for reading my long message.
    Luana

    @ everyone: Thanks for reading and for suggesting. Pls be patients a little bit. Updated/new link will be posted as soon as possible
    Here's the updated link: http://prove-e-riprove.blogspot.it/
    Thanks again for reading and for suggesting.

    Can be a moderator so kind to delete the double post? It seemed the first one wasn't posted, sorry.
    Moreover, it would be really much appreciated is the link to the blog in the first post could be replaced with the updated one or removed. TIA

  • #5
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,699
    Thanks
    0
    Thanked 233 Times in 228 Posts
    Hi there Lu+Lu,

    I have managed to make the tooltip work.
    You can download your working index.html file here...

    Note, though, that I have not corrected any of the coding errors that your page has...

    coothead

  • Users who have thanked coothead for this post:

    Lu+Lu (01-16-2014)

  • #6
    New to the CF scene
    Join Date
    Jan 2014
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi coothead,

    thank you so much for your reply and especially for the provided code !
    Seeing the fully working tooltip we reached the conclusion that leave it within the slider would be the most suitable solution for the blog, so we finally decided to adapt the tooltip to the container.

    Many many thanks again for the invaluable help and have a nice evening !


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •