Show caption as tooltip on mouseover

[extra-vitamins]

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!

[mariusjopen]

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

[extra-vitamins]

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

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

[mariusjopen]

Hi @extra-vitamins

Perfect! Thank you for sharing!

Best!

Marius

[yourlocalboy]

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

[mariusjopen]

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

[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

[mariusjopen]

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

Marius

[vthevoz]

@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)

[arminunruh]

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