Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. General Discussion
  3. Show caption as tooltip on mouseover

Show caption as tooltip on mouseover

Scheduled Pinned Locked Moved General Discussion
11 Posts 6 Posters 1.8k Views
  • 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.
  • mariusjopenM Offline
    mariusjopenM Offline
    mariusjopen
    Global Moderator
    wrote on last edited by
    #2

    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
    0
    • E Offline
      E Offline
      extra-vitamins
      wrote on last edited by
      #3

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

      1 Reply Last reply
      0
      • E Offline
        E Offline
        extra-vitamins
        wrote on last edited by
        #4

        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
        0
        • mariusjopenM Offline
          mariusjopenM Offline
          mariusjopen
          Global Moderator
          wrote on last edited by
          #5

          Hi @extra-vitamins

          Perfect! Thank you for sharing!

          Best!

          Marius

          www.mariusjopen.world

          1 Reply Last reply
          0
          • Y Offline
            Y Offline
            yourlocalboy
            wrote on last edited by
            #6

            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
            0
            • mariusjopenM Offline
              mariusjopenM Offline
              mariusjopen
              Global Moderator
              wrote on last edited by
              #7

              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
              0
              • E extra-vitamins

                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 Offline
                S Offline
                Seppo
                wrote on last edited by Seppo
                #8

                @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
                0
                • mariusjopenM Offline
                  mariusjopenM Offline
                  mariusjopen
                  Global Moderator
                  wrote on last edited by
                  #9

                  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
                  0
                  • E extra-vitamins

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

                    V Offline
                    V Offline
                    vthevoz
                    wrote on last edited by
                    #10

                    @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
                    0
                    • arminunruhA Offline
                      arminunruhA Offline
                      arminunruh
                      Global Moderator
                      wrote on last edited by
                      #11

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

                      1 Reply Last reply
                      1
                      Reply
                      • Reply as topic
                      Log in to reply
                      • Oldest to Newest
                      • Newest to Oldest
                      • Most Votes


                      I also code custom websites or custom Lay features.
                      šŸ’æ Email me here: šŸ’æ
                      info@laytheme.com

                      Before you post:
                      1. When using a WordPress Cache plugin, disable it or clear your cache.
                      2. Update Lay Theme and all Lay Theme Addons
                      3. Disable all Plugins
                      4. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"

                      This often solves issues you might run into

                      When you post:
                      1. Post a link to where the problem is
                      2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
                      3. If the problem is difficult to explain, post screenshots / link to a video to explain it
                      Online Users
                      Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
                      laytheme.com
                      • Login

                      • Don't have an account? Register

                      • Login or register to search.
                      • First post
                        Last post
                      0
                      • Recent
                      • Tags
                      • Popular
                      • Users
                      • Search