Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

    Show caption as tooltip on mouseover

    General Discussion
    6
    11
    1184
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • E
      extra-vitamins last edited by

      I'd like to have the caption of each image show up as a tooltip that follows the mouse on mouseover. I got this script working in another app but I can't get it to integrate with laytheme/wordpress.

      Here's what I have so far:

      <script>
      var tooltip = document.querySelectorAll('.caption');

      document.addEventListener('mousemove', fn, false);

      function fn(e) {
      for (var i=tooltip.length; i--;) {
      tooltip[i].style.left = e.pageX + 'px';
      tooltip[i].style.top = e.pageY + 'px';
      }
      }
      </script>

      AND this in the CSS:

      .img:hover .caption {
      display: block;
      }

      .caption {
      display: none;
      font-family: Slantbeta5;
      font-size: 30px;
      color: #17242c;
      padding: 10px;
      position: absolute;
      z-index: 1000;
      left: 50%;
      -webkit-transform: translateX(-50%);
      }

      The page is http://extra-vitamins.com/play

      Thanks!

      1 Reply Last reply Reply Quote 0
      • mariusjopen
        mariusjopen Global Moderator last edited by

        Hi @extra-vitamins

        this is a bit more complex than you think and I do not have the time to code it for you.

        But I can try to show you the right direction.

        On each page you have many images with many captions. So if you would make that the captions are following your mouse – they will ALL follow your mouse.

        So you need to use something like jQuery(this) when you hover an image. Then the function only is active for this specific box.

        Then make the coordinates of the box just follow the coordinates of your mouse. This has nothing to do with tooltip.
        It will just look like it.

        Have a look here:
        https://stackoverflow.com/questions/306583/how-to-get-the-children-of-the-this-selector
        https://stackoverflow.com/questions/3385936/jquery-follow-the-cursor-with-a-div

        You will need to experiment a little. But it is totally possible.

        Good luck!

        Marius

        www.mariusjopen.world

        1 Reply Last reply Reply Quote 0
        • E
          extra-vitamins last edited by

          @mariusjopen Okay I'll give that a try, thanks!!

          1 Reply Last reply Reply Quote 0
          • E
            extra-vitamins last edited by

            Figured it out! Heres the script if anyone needs it:

            <script>
            jQuery(document).bind('mousemove', function(e){
            jQuery(".caption").offset({left: e.pageX, top: e.pageY});
            });
            </script>

            and custom CSS:

            .img:hover .caption {
            display: block;
            position: absolute;
            }

            .caption {
            display: none;
            font-family: Slantbeta5;
            font-size: 30px;
            color: #17242c;
            position: absolute;
            z-index: 1000;
            }

            S V 2 Replies Last reply Reply Quote 0
            • mariusjopen
              mariusjopen Global Moderator last edited by

              Hi @extra-vitamins

              Perfect! Thank you for sharing!

              Best!

              Marius

              www.mariusjopen.world

              1 Reply Last reply Reply Quote 0
              • Y
                yourlocalboy last edited by

                Very curious to know if this could work for project titles on project thumbnails?
                Something like this:
                http://jsfiddle.net/ANKwQ/3265/

                1 Reply Last reply Reply Quote 0
                • mariusjopen
                  mariusjopen Global Moderator last edited by

                  Dear @extra-vitamins
                  sure. It can work for every div box.
                  One thing you need to consider is that it will trigger ALL the project titles. So you need to run a loop and catch each project title ID.

                  Best!

                  Marius

                  www.mariusjopen.world

                  1 Reply Last reply Reply Quote 0
                  • S
                    Seppo @extra-vitamins last edited by Seppo

                    @extra-vitamins @mariusjopen
                    Hey,
                    just noticed that lightbox zoom doesn't work on safari when script added. Firefox is working ok.

                    Any ideas how to get this working on safari also?!

                    Best,
                    Seppo

                    1 Reply Last reply Reply Quote 0
                    • mariusjopen
                      mariusjopen Global Moderator last edited by

                      Dear @extra-vitamins
                      Can you post a link to our website?
                      Then we can have a look and inspect that.

                      Marius

                      www.mariusjopen.world

                      1 Reply Last reply Reply Quote 0
                      • V
                        vthevoz @extra-vitamins last edited by

                        @extra-vitamins thanks, It works! But the I can't figure how to "offset" the caption by say x: 20px and y: 20px, since it's origin is 0,0 on the mouse pointer.

                        I could change the mouse icon, but that would be weird, or add spaces before the caption text, but then again the placement feels off.

                        Relative position with left/right, top/bottom values doesn't work in the img:hover caption (…) CSS.

                        Any ideas?

                        (sorry, I'm a real noob)

                        1 Reply Last reply Reply Quote 0
                        • arminunruh
                          arminunruh Global Moderator last edited by

                          jQuery(".caption").offset({left: e.pageX + 10, top: e.pageY + 10});

                          1 Reply Last reply Reply Quote 1
                          • First post
                            Last post

                          Before you post

                          Use the Search Feature. Maybe there is already a solution to your issue.

                          1. Update Lay Theme and all Lay Theme Addons
                          2. Disable all Plugins
                          3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
                          4. Now see if your problem solved itself
                          5. Go here, see if your problem is listed here:
                          Troubleshooting

                          When you post:
                          1. Post a link to where the problem is
                          2. If the problem is difficult to explain, post screenshots / link to a video to explain it

                          Thanks!

                          Online Users

                          A

                          Recent Topics

                          • A

                            Unable to update lay theme / to login wp admin

                          • A

                            New button feature not available

                          • S

                            Theme crashed - because of Polylang?

                          • A

                            carousel addon not working after update

                          laytheme.com