Tooltip Image set fixed position

Question

I have searched this topic and although I have found similar situations I was unable to apply it to my specific needs. I have a plugin for a wordpress site which enables me to display an image as a tooltip on a link hover. It works perfectly, the only problem I am having is that I want every image tooltip to have a fixed position on the page which doesn't change regardless of the location of the mouse/link on the hover. Right now the tooltip follows the mouse on whichever link I choose. For reference, I am trying it function like the hover images on this site: http://www.themorrisongallery.com/artists.html where there is a stationary fixed location which shows the image on the mouseover.

This is the plugin that I am using: http://smartcatdesign.net/wp-tooltip-with-images-free-wordpress-plugin/

Here is what the CSS currently looks like:

.sc-tooltip-wrapper{ width: auto; height: auto; float: right; margin: 0px; background: #ffffff; color: #333333; z-index: 9999; display: none; overflow: hidden; position: absolute; top: -50px; .sc-tooltip-wrapper img{ float: right; width: auto; height: auto; position: relative;

and here is what the script looks like:

jQuery(document).ready(function($) { var ctr = 0; $('.sc-tooltip').each(function() { ctr++; var tooltips = '<div id="sc-tooltip' + ctr + '-box" class="sc-tooltip-wrapper"><img src="' + $(this).attr('data-image') + '"/></div>'; $('body').append(tooltips); $(this).attr('id', 'sc-tooltip' + ctr); }); $('.sc-tooltip').hover(function(e) { var x = e.pageX; var y = e.pageY; var theId = '#' + $(this).attr('id') + '-box'; var leftOfset = $(theId).width(); $(theId).css({'left': x, 'top': y}); $(theId).fadeIn(200); }, function() { var theId = '#' + $(this).attr('id') + '-box'; $(theId).fadeOut(100); });

any suggestions would be very appreciated! I have been trying to set a fixed position using css and using the 'top' and 'left' attributes but everytime I do that the image just disappears from the page completely.

Niklas · Accepted Answer · 2014-07-25 23:38:49Z

You're not actually looking to get the image position: fixed, then it wouldn't scroll with the page...

Try this CSS:

.sc-tooltip-wrapper{ width: auto; height: auto; float: right; margin: 0px; background: #ffffff; color: #333333; z-index: 9999; display: none; overflow: hidden; position: absolute; top: 100px; /* Set the position you want here */ left: 100px; /* Set the position you want here */ } .sc-tooltip-wrapper img{ float: right; width: auto; height: auto; position: relative; }

And this javascript:

jQuery(document).ready(function($) { var ctr = 0; $('.sc-tooltip').each(function() { ctr++; var tooltips = '<div id="sc-tooltip' + ctr + '-box" class="sc-tooltip-wrapper"><img src="' + $(this).attr('data-image') + '"/></div>'; $('body').append(tooltips); $(this).attr('id', 'sc-tooltip' + ctr); }); $('.sc-tooltip').hover(function(e) { //var x = e.pageX; //var y = e.pageY; //var theId = '#' + $(this).attr('id') + '-box'; //var leftOfset = $(theId).width(); //$(theId).css({'left': x, 'top': y}); //$(theId).fadeIn(200); // Nice effect... $(theId).show(); // But this makes it more like your example }, function() { var theId = '#' + $(this).attr('id') + '-box'; //$(theId).fadeOut(100); // Nice effect... $(theId).hide(); // But this makes it more like your example });

What I've done is quite simply stopping the javascript from updating the images position as you hover the link. It stays in the position set in the CSS.

Also, changed $(theId).fadeIn(100);to $(theId).show();and $(theId).fadeOut(100);to $(theId).hide();to make the behavior more like that in the example you linked. I would guess the original is a bit smoother/softer and nicer, just wanted to give you the choice!

Thank you so much for your reply. I modified both the CSS and the javascript just as you provided, however I am not seeing the image at all when I hover over the links. I've been playing around with various values for the css top: 500px and left: 500px and with no success. Any suggestions?
It's hard without seeing the actual page. Is it online so you can link?
Thanks for the link, helped a lot! Seems like you have forgotten to comment out the row $(theId).css({'left': x, 'top': y}); as in my answer, giving an error.
Also, I noticed another error in the console, you have forgotten to close the script tag around your Google Analytics tracking code: <p><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga');</script></p>.
Thank you so much it is working now and it works perfectly! I seriously appreciate you helping me out!! : )

Collectives™ on Stack Overflow

Tooltip Image set fixed position

1 Answer 1

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Related