View Large Image On Hover & Tap – img-tooltip

Preview:

Description:

A Vanilla JavaScript image viewer that can be used to view the larger version of the image in a tooltip as you hover or tap the thumbnail.

How to use it:

1. Add the img-tooltip plugin’s files to the page.

<link rel="stylesheet" href="./tooltip.css" />
<script src="./tooltip.js"></script>

2. Insert a thumbnail into the document and define the path to the large image in the data-src attribute:

<img src="thumb.jpg" 
     class="example"
     data-src="full.jpg"
     />

3. Attach the plugin to the thumbnail image and done.

var jcImagesTooltipInstance = JcImagesTooltip.create('img.example', {
    // options here
});

4. Set the width & height of the image displayed in the tooltip.

var jcImagesTooltipInstance = JcImagesTooltip.create('img.example', {
    width: 430,
    height: 320
});

5. Set the offset of the image viewer. Default: 10px.

var jcImagesTooltipInstance = JcImagesTooltip.create('img.example', {
    offset: 50
});

6. Update the image viewer if needed.

jcImagesTooltipInstance.update();