Preview function?

I am looking for a function that will show a div with specifications from a car on hover a photo and disappear again on out. I found some examples but they are all placing the div under the photo, where I am looking for a method that you can define the position.

Any help would be highly appreciated.

Best to make it appear on click. Hover is a dead duck these days with the rise of touch devices.

Perhaps try writing one? It wouldn’t need to be complicated at all, by the sound of it. If that’s beyond your JS level (which is fine, no criticism!) then at least itemise your requirements in detail, so that the process can be explained to you.

One consideration for your criteria: make sure that, with JS off, the content is displayed by default. So, with JS on, the info gets hidden and a button gets added that can be clicked to reveal the info.

1 Like

Making something do something when something is clicked/hovered over is not normally difficult.
It sounds like you are after a tooltip library, maybe?

If that doesn’t do what you want, then I’m sure we could help more if you list your requirements as Ralph suggests.

1 Like

Hi Ralph and Pullo. I found a sollution which wasn’t working perfectly but with the help of fretburner it is working perfect now. This is what it has become:

      $(function() {
        var moveLeft = 20;
        var moveDown = 10;

        var currentDiv;

        $(".resultaat_listing").on({
            mouseenter: function (e) {
                currentDiv = $(this).parent().find('div.details')
                currentDiv.show();
            },
            mouseleave: function (e) {
                currentDiv.hide();
            },
            mousemove: function(e) {
                currentDiv
                  .css('top', e.pageY + moveDown)
                  .css('left', e.pageX + moveLeft);
            }
        }, "img");
      });

Thank you both for the input